<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>WebVR</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://immersive-web.github.io/webvr/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">WebVR</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://immersive-web.github.io/webvr/">https://immersive-web.github.io/webvr/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:vladimir@mozilla.com">Vladimir Vukicevic</a> (<a class="p-org org" href="https://mozilla.org/">Mozilla</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:bajones@google.com">Brandon Jones</a> (<a class="p-org org" href="http://google.com/">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:kgilbert@mozilla.com">Kearwood Gilbert</a> (<a class="p-org org" href="https://mozilla.org/">Mozilla</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:cvan@mozilla.com">Chris Van Wiemeersch</a> (<a class="p-org org" href="https://mozilla.org/">Mozilla</a>)
     <dt>Participate:
     <dd><a href="https://github.com/w3c/webvr/issues/new">File an issue</a> (<a href="https://github.com/w3c/webvr/issues">open issues</a>)
     <dd><a href="https://lists.w3.org/Archives/Public/public-webvr/">Mailing list archive</a>
     <dd><a href="irc://irc.w3.org:6665/">W3C’s #webvr IRC</a>
     <dd>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="https://licensebuttons.net/p/zero/1.0/80x15.png"></a> To the extent possible under law, the editors have waived all copyright
and related or neighboring rights to this work.
In addition, as of 1 January 1970,
the editors have made this specification available under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
Parts of this work may be from another specification document.  If so, those parts are instead covered by the license of that specification document. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes support for accessing virtual reality (VR) devices, including sensors and head-mounted displays on the Web.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#interfaces"><span class="secno">2</span> <span class="content">DOM Interfaces</span></a>
     <ol class="toc">
      <li>
       <a href="#interface-vrdisplay"><span class="secno">2.1</span> <span class="content">VRDisplay</span></a>
       <ol class="toc">
        <li><a href="#vrdisplay-attributes"><span class="secno">2.1.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vrlayerinit"><span class="secno">2.2</span> <span class="content">VRLayerInit</span></a>
       <ol class="toc">
        <li><a href="#vrlayerinit-attributes"><span class="secno">2.2.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vrdisplaycapabilities"><span class="secno">2.3</span> <span class="content">VRDisplayCapabilities</span></a>
       <ol class="toc">
        <li><a href="#vrdisplaycapabilities-attributes"><span class="secno">2.3.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li><a href="#interface-vreye"><span class="secno">2.4</span> <span class="content">VREye</span></a>
      <li><a href="#interface-interface-vrfieldofview"><span class="secno">2.5</span> <span class="content">VRFieldOfView</span></a>
      <li>
       <a href="#interface-vrpose"><span class="secno">2.6</span> <span class="content">VRPose</span></a>
       <ol class="toc">
        <li><a href="#vrpose-attributes"><span class="secno">2.6.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vrframedata"><span class="secno">2.7</span> <span class="content">VRFrameData</span></a>
       <ol class="toc">
        <li><a href="#vrframedata-attributes"><span class="secno">2.7.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vreyeparameters"><span class="secno">2.8</span> <span class="content">VREyeParameters</span></a>
       <ol class="toc">
        <li><a href="#vreyeparameters-attributes"><span class="secno">2.8.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vrstageparameters"><span class="secno">2.9</span> <span class="content">VRStageParameters</span></a>
       <ol class="toc">
        <li><a href="#vrstageparameters-attributes"><span class="secno">2.9.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-navigator"><span class="secno">2.10</span> <span class="content">Navigator Interface extension</span></a>
       <ol class="toc">
        <li><a href="#navigator-attributes"><span class="secno">2.10.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li>
       <a href="#interface-vrdisplayeventreason"><span class="secno">2.11</span> <span class="content">VRDisplayEventReason</span></a>
       <ol class="toc">
        <li><a href="#vrdisplayeventreason-codes"><span class="secno">2.11.1</span> <span class="content">Reasons</span></a>
       </ol>
      <li>
       <a href="#interface-vrdisplayevent"><span class="secno">2.12</span> <span class="content">VRDisplayEvent</span></a>
       <ol class="toc">
        <li><a href="#vrdisplayevent-attributes"><span class="secno">2.12.1</span> <span class="content">Attributes</span></a>
       </ol>
      <li><a href="#interface-window"><span class="secno">2.13</span> <span class="content">Window Interface extension</span></a>
      <li>
       <a href="#interface-gamepad"><span class="secno">2.14</span> <span class="content">Gamepad Interface extension</span></a>
       <ol class="toc">
        <li><a href="#gamepad-attributes"><span class="secno">2.14.1</span> <span class="content">Attributes</span></a>
       </ol>
     </ol>
    <li><a href="#security"><span class="secno">3</span> <span class="content">Security Considerations</span></a>
    <li><a href="#ack"><span class="secno">4</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <p><b>Development of the WebVR API has halted in favor of being replaced the <a href="https://immersive-web.github.io/webxr/">WebXR Device API</a>. Several browsers will continue to support this version of the API in the meantime.</b></p>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>Hardware that enables Virtual Reality applications requires high-precision, low-latency interfaces to deliver an acceptable experience.
Other interfaces, such as device orientation events, can be repurposed to surface VR input but doing so dilutes the interface’s original
intent and often does not provide the precision necessary for high-quality VR. The WebVR API provides purpose-built interfaces
to VR hardware to allow developers to build compelling, comfortable VR experiences.</p>
   <h2 class="heading settled" data-level="2" id="interfaces"><span class="secno">2. </span><span class="content">DOM Interfaces</span><a class="self-link" href="#interfaces"></a></h2>
   <p>This section describes the interfaces and functionality added to the DOM to support runtime access to the functionality described above.</p>
   <h3 class="heading settled" data-level="2.1" id="interface-vrdisplay"><span class="secno">2.1. </span><span class="content">VRDisplay</span><a class="self-link" href="#interface-vrdisplay"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay">VRDisplay</a></code> interface forms the base of all VR devices supported by this API. It includes generic information such as device IDs and descriptions.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrdisplay"><code><c- g>VRDisplay</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplay-isconnected" id="ref-for-dom-vrdisplay-isconnected"><c- g>isConnected</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplay-ispresenting" id="ref-for-dom-vrdisplay-ispresenting"><c- g>isPresenting</c-></a>;

  /**
   * Dictionary of capabilities describing the VRDisplay.
   */
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrdisplaycapabilities" id="ref-for-vrdisplaycapabilities"><c- n>VRDisplayCapabilities</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplayCapabilities" href="#dom-vrdisplay-capabilities" id="ref-for-dom-vrdisplay-capabilities"><c- g>capabilities</c-></a>;

  /**
   * If this VRDisplay supports room-scale experiences, the optional
   * stage attribute contains details on the room-scale parameters.
   * The stageParameters attribute can not change between null
   * and non-null once the VRDisplay is enumerated; however,
   * the values within VRStageParameters may change after
   * any call to VRDisplay.submitFrame as the user may re-configure
   * their environment at any time.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrstageparameters" id="ref-for-vrstageparameters"><c- n>VRStageParameters</c-></a>? <dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export data-readonly data-type="VRStageParameters?" id="dom-vrdisplay-stageparameters"><code><c- g>stageParameters</c-></code><a class="self-link" href="#dom-vrdisplay-stageparameters"></a></dfn>;

  /**
   * Return the current VREyeParameters for the given eye.
   */
  <a class="n" data-link-type="idl-name" href="#vreyeparameters" id="ref-for-vreyeparameters"><c- n>VREyeParameters</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export data-lt="getEyeParameters(whichEye)" id="dom-vrdisplay-geteyeparameters"><code><c- g>getEyeParameters</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="#enumdef-vreye" id="ref-for-enumdef-vreye"><c- n>VREye</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay/getEyeParameters(whichEye)" data-dfn-type="argument" data-export id="dom-vrdisplay-geteyeparameters-whicheye-whicheye"><code><c- g>whichEye</c-></code><a class="self-link" href="#dom-vrdisplay-geteyeparameters-whicheye-whicheye"></a></dfn>);

  /**
   * An identifier for this distinct VRDisplay. Used as an
   * association point in the Gamepad API.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-vrdisplay-displayid"><code><c- g>displayId</c-></code></dfn>;

  /**
   * A display name, a user-readable name identifying it.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-vrdisplay-displayname"><code><c- g>displayName</c-></code><a class="self-link" href="#dom-vrdisplay-displayname"></a></dfn>;

  /**
   * Populates the passed VRFrameData with the information required to render
   * the current frame. The value provided will not change until JavaScript has
   * returned control to the browser. Only valid to call in a
   * VRDisplay.requestAnimationFrame callback.
   */
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export data-lt="getFrameData(frameData)" id="dom-vrdisplay-getframedata"><code><c- g>getFrameData</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="#vrframedata" id="ref-for-vrframedata"><c- n>VRFrameData</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay/getFrameData(frameData)" data-dfn-type="argument" data-export id="dom-vrdisplay-getframedata-framedata-framedata"><code><c- g>frameData</c-></code><a class="self-link" href="#dom-vrdisplay-getframedata-framedata-framedata"></a></dfn>);

  /**
   * Return a VRPose containing the future predicted pose of the VRDisplay
   * when the current frame will be presented. The value returned will not
   * change until JavaScript has returned control to the browser.
   *
   * The VRPose will contain the position, orientation, velocity,
   * and acceleration of each of these properties.
   */
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#vrpose" id="ref-for-vrpose"><c- n>VRPose</c-></a> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-getpose" id="ref-for-dom-vrdisplay-getpose"><c- g>getPose</c-></a>();

  /**
   * Reset the pose for this display, treating its current position and
   * orientation as the "origin/zero" values. VRPose.position,
   * VRPose.orientation, and VRStageParameters.sittingToStandingTransform may be
   * updated when calling resetPose(). This should be called in only
   * sitting-space experiences.
   */
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose"><c- g>resetPose</c-></a>();

  /**
   * z-depth defining the near plane of the eye view frustum
   * enables mapping of values in the render target depth
   * attachment to scene coordinates. Initially set to 0.01.
   */
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export data-type="double" id="dom-vrdisplay-depthnear"><code><c- g>depthNear</c-></code><a class="self-link" href="#dom-vrdisplay-depthnear"></a></dfn>;

  /**
   * z-depth defining the far plane of the eye view frustum
   * enables mapping of values in the render target depth
   * attachment to scene coordinates. Initially set to 10000.0.
   */
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export data-type="double" id="dom-vrdisplay-depthfar"><code><c- g>depthFar</c-></code><a class="self-link" href="#dom-vrdisplay-depthfar"></a></dfn>;

  /**
   * The callback passed to `requestAnimationFrame` will be called
   * any time a new frame should be rendered. When the VRDisplay is
   * presenting the callback will be called at the native refresh
   * rate of the HMD. When not presenting this function acts
   * identically to how window.requestAnimationFrame acts. Content should
   * make no assumptions of frame rate or vsync behavior as the HMD runs
   * asynchronously from other displays and at differing refresh rates.
   */
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export data-lt="requestAnimationFrame(callback)" id="dom-vrdisplay-requestanimationframe"><code><c- g>requestAnimationFrame</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#framerequestcallback" id="ref-for-framerequestcallback"><c- n>FrameRequestCallback</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay/requestAnimationFrame(callback)" data-dfn-type="argument" data-export id="dom-vrdisplay-requestanimationframe-callback-callback"><code><c- g>callback</c-></code><a class="self-link" href="#dom-vrdisplay-requestanimationframe-callback-callback"></a></dfn>);

  /**
   * Passing the value returned by `requestAnimationFrame` to
   * `cancelAnimationFrame` will unregister the callback.
   */
  <c- b>void</c-> <dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export data-lt="cancelAnimationFrame(handle)" id="dom-vrdisplay-cancelanimationframe"><code><c- g>cancelAnimationFrame</c-></code><a class="self-link" href="#dom-vrdisplay-cancelanimationframe"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①"><c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplay/cancelAnimationFrame(handle)" data-dfn-type="argument" data-export id="dom-vrdisplay-cancelanimationframe-handle-handle"><code><c- g>handle</c-></code><a class="self-link" href="#dom-vrdisplay-cancelanimationframe-handle-handle"></a></dfn>);

  /**
   * Begin presenting to the VRDisplay. Must be called in response to a user gesture.
   * Repeat calls while already presenting will update the layers being displayed.
   * If the number of values in the leftBounds/rightBounds arrays is not 0 or 4 for any of the passed layers the promise is rejected
   * If the source of any of the layers is not present (null), the promise is rejected.
   */
  <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export data-lt="requestPresent(layers)" id="dom-vrdisplay-requestpresent"><code><c- g>requestPresent</c-></code></dfn>(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit"><c- n>VRLayerInit</c-></a>> <dfn class="idl-code" data-dfn-for="VRDisplay/requestPresent(layers)" data-dfn-type="argument" data-export id="dom-vrdisplay-requestpresent-layers-layers"><code><c- g>layers</c-></code><a class="self-link" href="#dom-vrdisplay-requestpresent-layers-layers"></a></dfn>);

  /**
   * Stops presenting to the VRDisplay.
   */
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-exitpresent" id="ref-for-dom-vrdisplay-exitpresent"><c- g>exitPresent</c-></a>();

  /**
   * Get the layers currently being presented.
   */
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①"><c- n>VRLayerInit</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-getlayers" id="ref-for-dom-vrdisplay-getlayers"><c- g>getLayers</c-></a>();

  /**
   * The layer provided to the VRDisplay will be captured and presented
   * in the HMD. Calling this function has the same effect on the source
   * canvas as any other operation that uses its source image, and canvases
   * created without preserveDrawingBuffer set to true will be cleared. Only
   * valid to call in a VRDisplay.requestAnimationFrame callback.
   */
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-submitframe" id="ref-for-dom-vrdisplay-submitframe"><c- g>submitFrame</c-></a>();
};
</pre>
   <h4 class="heading settled" data-level="2.1.1" id="vrdisplay-attributes"><span class="secno">2.1.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrdisplay-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export id="dom-vrdisplay-isconnected"><code>isConnected</code></dfn> <i>(Deprecated)</i> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-isconnected" id="ref-for-dom-vrdisplay-isconnected①">isConnected</a></code> attribute MUST return the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①">VRDisplay</a></code>'s connected state.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export id="dom-vrdisplay-ispresenting"><code>isPresenting</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-ispresenting" id="ref-for-dom-vrdisplay-ispresenting①">isPresenting</a></code> attribute MUST return the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②">VRDisplay</a></code>'s presentation state.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="attribute" data-export id="dom-vrdisplay-capabilities"><code>capabilities</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-capabilities" id="ref-for-dom-vrdisplay-capabilities①">capabilities</a></code> attribute MUST return the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③">VRDisplay</a></code>'s <code class="idl"><a data-link-type="idl" href="#vrdisplaycapabilities" id="ref-for-vrdisplaycapabilities①">VRDisplayCapabilities</a></code> object, a dictionary of capabilities describing the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④">VRDisplay</a></code>.</p>
   <p><dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-geteyeparameters①"><code>getEyeParameters()</code><a class="self-link" href="#dom-vrdisplay-geteyeparameters①"></a></dfn> Returns the current <code class="idl"><a data-link-type="idl" href="#vreyeparameters" id="ref-for-vreyeparameters①">VREyeParameters</a></code> for the given eye. The eye parameters MAY change at any time due to external factors, such as the user changing the IPD with hardware controls.</p>
   <p><dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-getframedata①"><code>getFrameData()</code><a class="self-link" href="#dom-vrdisplay-getframedata①"></a></dfn> Populates the provided <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata①">VRFrameData</a></code> object with the <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose①">VRPose</a></code> and view and projection matricies for the current frame. These values describe the position, orientation, acceleration, and velocity of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤">VRDisplay</a></code> that should be used when rendering the next frame of a scene. The User Agent MAY optionally use predictive techniques to estimate what these values will be at the time that the next frame will be displayed to the user. The value returned will not change until JavaScript has returned control to the browser. Returns true if the the provided <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata②">VRFrameData</a></code> object was successfully updated, false otherwise. Will return false and not populate the <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata③">VRFrameData</a></code> object if called outside a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestanimationframe" id="ref-for-dom-vrdisplay-requestanimationframe">requestAnimationFrame()</a></code> callback.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-getpose"><code>getPose()</code></dfn> <i>(Deprecated)</i> Returns a <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose②">VRPose</a></code> describing the position, orientation, acceleration, and velocity of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦">VRDisplay</a></code> that should be used when rendering the next frame of a scene. The User Agent MAY optionally use predictive techniques to estimate what the pose will be at the time that the next frame will be displayed to the user. Subsequent calls to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getpose" id="ref-for-dom-vrdisplay-getpose①">getPose()</a></code> MUST return a <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose③">VRPose</a></code> with the same values until the next call to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-submitframe" id="ref-for-dom-vrdisplay-submitframe①">submitFrame()</a></code>.</p>
   <p>This function is deprecated but is preserved for backwards compatibility. Using it MAY incur warnings from the User Agent. Prefer using <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata">getFrameData()</a></code>, which also provides a <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose④">VRPose</a></code>, instead.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-resetpose"><code>resetPose()</code></dfn> <i>(Deprecated)</i> Reset the pose for the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑧">VRDisplay</a></code>, treating its current position and orientation as the "origin/zero" values. Future values returned from <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata①">getFrameData()</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getpose" id="ref-for-dom-vrdisplay-getpose②">getPose()</a></code> will describe positions relative to the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑨">VRDisplay</a></code>'s position when <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose①">resetPose()</a></code> was last called and will treat the display’s yaw when <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose②">resetPose()</a></code> was last called as the forward orientation. The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⓪">VRDisplay</a></code>'s reported roll and pitch do not change when <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose③">resetPose()</a></code> is called as they are relative to gravity. Calling <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose④">resetPose()</a></code> may change the <code class="idl"><a data-link-type="idl" href="#dom-vrstageparameters-sittingtostandingtransform" id="ref-for-dom-vrstageparameters-sittingtostandingtransform">sittingToStandingTransform</a></code> matrix of the <code class="idl"><a data-link-type="idl" href="#vrstageparameters" id="ref-for-vrstageparameters①">VRStageParameters</a></code>.</p>
   <p><dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-requestanimationframe①"><code>requestAnimationFrame()</code><a class="self-link" href="#dom-vrdisplay-requestanimationframe①"></a></dfn> Functionally equivalent to <a href="https://www.w3.org/TR/html51/webappapis.html#animation-frames">window.requestAnimationFrame</a> when the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①①">VRDisplay</a></code> is not presenting. When the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①②">VRDisplay</a></code> is presenting the callback is called at the native refresh rate of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①③">VRDisplay</a></code>.</p>
   <p><dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-cancelanimationframe①"><code>cancelAnimationFrame()</code><a class="self-link" href="#dom-vrdisplay-cancelanimationframe①"></a></dfn> Passing the value returned by <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestanimationframe" id="ref-for-dom-vrdisplay-requestanimationframe①">requestAnimationFrame()</a></code> to will unregister the callback.</p>
   <p><dfn class="idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-requestpresent①"><code>requestPresent()</code><a class="self-link" href="#dom-vrdisplay-requestpresent①"></a></dfn> Begins presenting the contents of the specified <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit②">VRLayerInit</a></code> array on the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①④">VRDisplay</a></code> and fulfills the returned promise when presentation has begun. If <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-canpresent" id="ref-for-dom-vrdisplaycapabilities-canpresent">canPresent</a></code> is false, the promise MUST be rejected. If the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit③">VRLayerInit</a></code> array contains more than <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-maxlayers" id="ref-for-dom-vrdisplaycapabilities-maxlayers">maxLayers</a></code> elements, the promise MUST be rejected. If any of the <code class="idl"><a data-link-type="idl" href="#typedefdef-vrsource" id="ref-for-typedefdef-vrsource">VRSource</a></code> properties specified in the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit④">VRLayerInit</a></code> array contain a context that is not WebGL (i.e., WebGLRenderingContextBase), the promise MUST be rejected. If <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent">requestPresent()</a></code> is called outside of an engagement gesture, the promise MUST be rejected unless the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⑤">VRDisplay</a></code> was already presenting. This engagement gesture is also sufficient to allow <a href="http://w3c.github.io/pointerlock/">requestPointerLock</a> calls until presentation has ended. The User Agent MAY reject the promise for any other reason. If the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⑥">VRDisplay</a></code> is already presenting when <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent①">requestPresent()</a></code> is called, the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⑦">VRDisplay</a></code> SHOULD update the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit⑤">VRLayerInit</a></code> list being presented. If a call to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent②">requestPresent()</a></code> is rejected while the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⑧">VRDisplay</a></code> is already presenting, the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay①⑨">VRDisplay</a></code> MUST end presentation.</p>
   <p>In order for a WebGL canvas to be used as a <code class="idl"><a data-link-type="idl" href="#typedefdef-vrsource" id="ref-for-typedefdef-vrsource①">VRSource</a></code>, the context MUST be compatible with the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⓪">VRDisplay</a></code>. This can mean different things for different environments - for example, on a desktop computer, this means that the context MUST be created against the graphics adapter that the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②①">VRDisplay</a></code> is physically plugged into. In the event that a context is not already compatible with the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②②">VRDisplay</a></code>, while the requestPresent promise is outstanding, the <a href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.13">context will be lost and attempt to recreate itself</a> using the compatible graphics adapter. It is the document’s responsibility to handle WebGL context loss properly, calling preventDefault() during webglcontextlost and recreating any necessary WebGL resources during the webglcontextrestored event. If the webglcontextlost event is fired but preventDefault is not called, the <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent③">requestPresent()</a></code> promise MUST be rejected. If the User Agent requests user consent in response to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent④">requestPresent()</a></code>, the context-lost operation MUST NOT happen prior to the user’s granting consent. If the context-lost event is handled, all other WebGL contexts on the page MAY also have their context lost as byproduct of using the correct graphics adapter instead of the default one. The promise may also fail for a variety of other reasons, such as the context being actively used by a different, incompatible <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②③">VRDisplay</a></code>. The fulfillment of the <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent⑤">requestPresent()</a></code> promise implies that the WebGL context is now compatible with the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②④">VRDisplay</a></code>.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-exitpresent"><code>exitPresent()</code></dfn> Ends presentation to the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⑤">VRDisplay</a></code> and fulfills the returned promise when fully exited. If the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⑥">VRDisplay</a></code> is not presenting the promise MUST be rejected.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-getlayers"><code>getLayers()</code></dfn> Returns an array with the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit⑥">VRLayerInit</a></code> currently being presented. MUST return an empty array if the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⑦">VRDisplay</a></code> is not currently presenting. If the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⑧">VRDisplay</a></code> is presenting MUST return an array containing the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit⑦">VRLayerInit</a></code>s last passed to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent⑥">requestPresent()</a></code>.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplay" data-dfn-type="method" data-export id="dom-vrdisplay-submitframe"><code>submitFrame()</code></dfn> Captures the current state of the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit⑧">VRLayerInit</a></code> currently being presented and displays it on the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay②⑨">VRDisplay</a></code>. It is assumed that the frame was rendered using the <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose⑤">VRPose</a></code> and matrices provided by the last call to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata②">getFrameData()</a></code>. If <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata③">getFrameData()</a></code> was not called prior to calling <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-submitframe" id="ref-for-dom-vrdisplay-submitframe②">submitFrame()</a></code>, the User Agent MAY warn the user of potentially malformed visuals or prevent the frame from being shown at all. If any <code class="idl"><a data-link-type="idl" href="#typedefdef-vrsource" id="ref-for-typedefdef-vrsource②">VRSource</a></code> that was specified in the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit⑨">VRLayerInit</a></code> array at <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent⑦">requestPresent()</a></code> time had no context, but a non-WebGL context was created subsequently after the fact, a NotSupportedError DOMException MUST be thrown, and the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⓪">VRDisplay</a></code> MUST NOT be updated with the contents of the layers specified by <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①⓪">VRLayerInit</a></code>. Will be ignored if called outside a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③①">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestanimationframe" id="ref-for-dom-vrdisplay-requestanimationframe②">requestAnimationFrame()</a></code> callback.</p>
   <div class="example" id="example-42240b62">
    <a class="self-link" href="#example-42240b62"></a> The following code demonstrates presenting a simple rendering loop to a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③②">VRDisplay</a></code>. 
<pre class="lang-js highlight"><c- a>var</c-> frameData <c- o>=</c-> <c- k>new</c-> VRFrameData<c- p>();</c->

<c- c1>// Render a single frame of VR data.</c->
<c- a>function</c-> onVRFrame<c- p>()</c-> <c- p>{</c->
  <c- c1>// Schedule the next frame’s callback</c->
  vrDisplay<c- p>.</c->requestAnimationFrame<c- p>(</c->onVRFrame<c- p>);</c->

  <c- c1>// Poll the VRDisplay for the current frame’s matrices and pose</c->
  vrDisplay<c- p>.</c->getFrameData<c- p>(</c->frameData<c- p>);</c->

  gl<c- p>.</c->clear<c- p>(</c->gl<c- p>.</c->COLOR_BUFFER_BIT <c- o>|</c-> gl<c- p>.</c->DEPTH_BUFFER_BIT<c- p>);</c->

  <c- c1>// Render to the left eye’s view to the left half of the canvas</c->
  gl<c- p>.</c->viewport<c- p>(</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> canvas<c- p>.</c->width <c- o>*</c-> <c- mf>0.5</c-><c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
  gl<c- p>.</c->uniformMatrix4fv<c- p>(</c->projectionMatrixLocation<c- p>,</c-> <c- kc>false</c-><c- p>,</c-> frameData<c- p>.</c->leftProjectionMatrix<c- p>);</c->
  gl<c- p>.</c->uniformMatrix4fv<c- p>(</c->viewMatrixLocation<c- p>,</c-> <c- kc>false</c-><c- p>,</c-> frameData<c- p>.</c->leftViewMatrix<c- p>);</c->
  drawGeometry<c- p>();</c->

  <c- c1>// Render to the right eye’s view to the right half of the canvas</c->
  gl<c- p>.</c->viewport<c- p>(</c->canvas<c- p>.</c->width <c- o>*</c-> <c- mf>0.5</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> canvas<c- p>.</c->width <c- o>*</c-> <c- mf>0.5</c-><c- p>,</c-> canvas<c- p>.</c->height<c- p>);</c->
  gl<c- p>.</c->uniformMatrix4fv<c- p>(</c->projectionMatrixLocation<c- p>,</c-> <c- kc>false</c-><c- p>,</c-> frameData<c- p>.</c->rightProjectionMatrix<c- p>);</c->
  gl<c- p>.</c->uniformMatrix4fv<c- p>(</c->viewMatrixLocation<c- p>,</c-> <c- kc>false</c-><c- p>,</c-> frameData<c- p>.</c->rightViewMatrix<c- p>);</c->
  drawGeometry<c- p>();</c->

  <c- c1>// Indicate that we are ready to present the rendered frame to the VRDisplay</c->
  vrDisplay<c- p>.</c->submitFrame<c- p>();</c->
<c- p>}</c->

<c- c1>// Begin presentation (must be called within a user gesture)</c->
vrDisplay<c- p>.</c->requestPresent<c- p>([{</c-> source<c- o>:</c-> canvas <c- p>}]).</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
  vrDisplay<c- p>.</c->requestAnimationFrame<c- p>(</c->onVRFrame<c- p>);</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.2" id="interface-vrlayerinit"><span class="secno">2.2. </span><span class="content">VRLayerInit</span><a class="self-link" href="#interface-vrlayerinit"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①①">VRLayerInit</a></code> interface is provided to a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③③">VRDisplay</a></code> and presented in the HMD.</p>
<pre class="idl highlight def" id="vrlayerinit-dictionary"><c- b>typedef</c-> (<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement" id="ref-for-htmlcanvaselement"><c- n>HTMLCanvasElement</c-></a> <c- b>or</c->
         <a class="n" data-link-type="idl-name" href="https://wiki.whatwg.org/wiki/OffscreenCanvas#offscreencanvas" id="ref-for-offscreencanvas"><c- n>OffscreenCanvas</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-vrsource"><code><c- g>VRSource</c-></code></dfn>;

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-vrlayerinit"><code><c- g>VRLayerInit</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="#typedefdef-vrsource" id="ref-for-typedefdef-vrsource③"><c- n>VRSource</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="VRSource? " href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source"><c- g>source</c-></a> = <c- b>null</c->;

  <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float"><c- b>float</c-></a>> <a class="idl-code" data-default="[]" data-link-type="dict-member" data-type="sequence<float> " href="#dom-vrlayerinit-leftbounds" id="ref-for-dom-vrlayerinit-leftbounds"><c- g>leftBounds</c-></a> = [ ];
  <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float①"><c- b>float</c-></a>> <a class="idl-code" data-default="[]" data-link-type="dict-member" data-type="sequence<float> " href="#dom-vrlayerinit-rightbounds" id="ref-for-dom-vrlayerinit-rightbounds"><c- g>rightBounds</c-></a> = [ ];
};
</pre>
   <h4 class="heading settled" data-level="2.2.1" id="vrlayerinit-attributes"><span class="secno">2.2.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrlayerinit-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRLayerInit" data-dfn-type="dict-member" data-export id="dom-vrlayerinit-source"><code>source</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source①">source</a></code> attribute defines the canvas whose contents will be presented by the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③④">VRDisplay</a></code> when <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⑤">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-submitframe" id="ref-for-dom-vrdisplay-submitframe③">submitFrame()</a></code> is called.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRLayerInit" data-dfn-type="dict-member" data-export id="dom-vrlayerinit-leftbounds"><code>leftBounds</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-leftbounds" id="ref-for-dom-vrlayerinit-leftbounds①">leftBounds</a></code> attribute contains four values defining the texture bounds within the <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source②">source</a></code> canvas to present to the eye in UV space: <code>[0]</code> left offset of the bounds (0.0 - 1.0); <code>[1]</code> top offset of the bounds (0.0 - 1.0); <code>[2]</code> width of the bounds (0.0 - 1.0); <code>[3]</code> height of the bounds (0.0 - 1.0). The <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-leftbounds" id="ref-for-dom-vrlayerinit-leftbounds②">leftBounds</a></code> MUST default to <code>[0.0, 0.0, 0.5, 1.0]</code>.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRLayerInit" data-dfn-type="dict-member" data-export id="dom-vrlayerinit-rightbounds"><code>rightBounds</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-rightbounds" id="ref-for-dom-vrlayerinit-rightbounds①">rightBounds</a></code> attribute contains four values defining the texture bounds rectangle within the <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source③">source</a></code> canvas to present to the eye in UV space: <code>[0]</code> left offset of the bounds (0.0 - 1.0); <code>[1]</code> top offset of the bounds (0.0 - 1.0); <code>[2]</code> width of the bounds (0.0 - 1.0); <code>[3]</code> height of the bounds (0.0 - 1.0). The <code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-rightbounds" id="ref-for-dom-vrlayerinit-rightbounds②">rightBounds</a></code> MUST default to <code>[0.5, 0.0, 0.5, 1.0]</code>.</p>
   <h3 class="heading settled" data-level="2.3" id="interface-vrdisplaycapabilities"><span class="secno">2.3. </span><span class="content">VRDisplayCapabilities</span><a class="self-link" href="#interface-vrdisplaycapabilities"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#vrdisplaycapabilities" id="ref-for-vrdisplaycapabilities②">VRDisplayCapabilities</a></code> interface describes the capabilities of a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⑥">VRDisplay</a></code>. These are expected to be static per-device/per-user.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrdisplaycapabilities"><code><c- g>VRDisplayCapabilities</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasposition" id="ref-for-dom-vrdisplaycapabilities-hasposition"><c- g>hasPosition</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasorientation" id="ref-for-dom-vrdisplaycapabilities-hasorientation"><c- g>hasOrientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasexternaldisplay" id="ref-for-dom-vrdisplaycapabilities-hasexternaldisplay"><c- g>hasExternalDisplay</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑥"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-canpresent" id="ref-for-dom-vrdisplaycapabilities-canpresent①"><c- g>canPresent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vrdisplaycapabilities-maxlayers" id="ref-for-dom-vrdisplaycapabilities-maxlayers①"><c- g>maxLayers</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.3.1" id="vrdisplaycapabilities-attributes"><span class="secno">2.3.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrdisplaycapabilities-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayCapabilities" data-dfn-type="attribute" data-export id="dom-vrdisplaycapabilities-hasposition"><code>hasPosition</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-hasposition" id="ref-for-dom-vrdisplaycapabilities-hasposition①">hasPosition</a></code> attribute MUST return whether the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⑦">VRDisplay</a></code> is capable of tracking its position.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayCapabilities" data-dfn-type="attribute" data-export id="dom-vrdisplaycapabilities-hasorientation"><code>hasOrientation</code></dfn> <i>(Deprecated)</i> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-hasorientation" id="ref-for-dom-vrdisplaycapabilities-hasorientation①">hasOrientation</a></code> attribute MUST return whether the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⑧">VRDisplay</a></code> is capable of tracking its orientation.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayCapabilities" data-dfn-type="attribute" data-export id="dom-vrdisplaycapabilities-hasexternaldisplay"><code>hasExternalDisplay</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-hasexternaldisplay" id="ref-for-dom-vrdisplaycapabilities-hasexternaldisplay①">hasExternalDisplay</a></code> attribute MUST return whether the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay③⑨">VRDisplay</a></code> is separate from the device’s primary display. If presenting VR content will obscure other content on the device, this should be false. When false, the application should not attempt to mirror VR content or update non-VR UI because that content will not be visible.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayCapabilities" data-dfn-type="attribute" data-export id="dom-vrdisplaycapabilities-canpresent"><code>canPresent</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-canpresent" id="ref-for-dom-vrdisplaycapabilities-canpresent②">canPresent</a></code> attribute MUST return whether the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④⓪">VRDisplay</a></code> is capable of presenting content to an HMD or similar device. Can be used to indicate "magic window" devices that are capable of 6DoF tracking but for which <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④①">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent⑧">requestPresent()</a></code> is not meaningful. If false then calls to <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④②">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent⑨">requestPresent()</a></code> should always fail, and <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④③">VRDisplay</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-geteyeparameters" id="ref-for-dom-vrdisplay-geteyeparameters">getEyeParameters()</a></code> should return null.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayCapabilities" data-dfn-type="attribute" data-export id="dom-vrdisplaycapabilities-maxlayers"><code>maxLayers</code></dfn> Indicates the maximum length of the array that <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent①⓪">requestPresent()</a></code> will accept. MUST be 1 if <code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-canpresent" id="ref-for-dom-vrdisplaycapabilities-canpresent③">canPresent</a></code> is true, 0 otherwise.</p>
   <p class="note" role="note"><span>Note:</span> Future revisions of this spec may allow multiple layers to enable more complex rendering effects such as compositing WebGL and DOM elements together. That functionality is not allowed by this revision of the spec.</p>
   <h3 class="heading settled" data-level="2.4" id="interface-vreye"><span class="secno">2.4. </span><span class="content">VREye</span><a class="self-link" href="#interface-vreye"></a></h3>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-vreye"><code><c- g>VREye</c-></code></dfn> {
  <dfn class="idl-code" data-dfn-for="VREye" data-dfn-type="enum-value" data-export id="dom-vreye-left"><code><c- s>"left"</c-></code><a class="self-link" href="#dom-vreye-left"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="VREye" data-dfn-type="enum-value" data-export id="dom-vreye-right"><code><c- s>"right"</c-></code><a class="self-link" href="#dom-vreye-right"></a></dfn>
};
</pre>
   <h3 class="heading settled" data-level="2.5" id="interface-interface-vrfieldofview"><span class="secno">2.5. </span><span class="content">VRFieldOfView</span><a class="self-link" href="#interface-interface-vrfieldofview"></a></h3>
   <p><i>(Deprecated)</i> The <code class="idl"><a data-link-type="idl" href="#vrfieldofview" id="ref-for-vrfieldofview">VRFieldOfView</a></code> interface represents a field of view, as given by 4 degrees describing the view from a center point.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrfieldofview"><code><c- g>VRFieldOfView</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRFieldOfView" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-vrfieldofview-updegrees"><code><c- g>upDegrees</c-></code><a class="self-link" href="#dom-vrfieldofview-updegrees"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRFieldOfView" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-vrfieldofview-rightdegrees"><code><c- g>rightDegrees</c-></code><a class="self-link" href="#dom-vrfieldofview-rightdegrees"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRFieldOfView" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-vrfieldofview-downdegrees"><code><c- g>downDegrees</c-></code><a class="self-link" href="#dom-vrfieldofview-downdegrees"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="VRFieldOfView" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-vrfieldofview-leftdegrees"><code><c- g>leftDegrees</c-></code><a class="self-link" href="#dom-vrfieldofview-leftdegrees"></a></dfn>;
};
</pre>
   <h3 class="heading settled" data-level="2.6" id="interface-vrpose"><span class="secno">2.6. </span><span class="content">VRPose</span><a class="self-link" href="#interface-vrpose"></a></h3>
   <p>The VRPose interface represents a sensor’s state at a given timestamp.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrpose"><code><c- g>VRPose</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-position" id="ref-for-dom-vrpose-position"><c- g>position</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-linearvelocity" id="ref-for-dom-vrpose-linearvelocity"><c- g>linearVelocity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array②"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-linearacceleration" id="ref-for-dom-vrpose-linearacceleration"><c- g>linearAcceleration</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array③"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-orientation" id="ref-for-dom-vrpose-orientation"><c- g>orientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array④"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-angularvelocity" id="ref-for-dom-vrpose-angularvelocity"><c- g>angularVelocity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑤"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-angularacceleration" id="ref-for-dom-vrpose-angularacceleration"><c- g>angularAcceleration</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.6.1" id="vrpose-attributes"><span class="secno">2.6.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrpose-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-position"><code>position</code></dfn> Position of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④④">VRDisplay</a></code> as a 3D vector. Position is given in meters from
an origin point, which is either the position the sensor was first read at or
the position of the sensor at the point that <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose⑤">resetPose()</a></code> was last called.
The coordinate system uses these axis definitions:</p>
   <ul>
    <li data-md>
     <p>Positive X is to the user’s right.</p>
    <li data-md>
     <p>Positive Y is up.</p>
    <li data-md>
     <p>Positive Z is behind the user.</p>
   </ul>
   <p>All positions are given relative to the identity orientation in sitting space.
MAY be null if the sensor is incapable of providing positional data. User agents
MAY provide emulated position values through techniques such as neck modeling,
but when doing so SHOULD report <code class="idl"><a data-link-type="idl" href="#vrdisplaycapabilities" id="ref-for-vrdisplaycapabilities③">VRDisplayCapabilities</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrdisplaycapabilities-hasposition" id="ref-for-dom-vrdisplaycapabilities-hasposition②">hasPosition</a></code> as
false. When not null MUST be a three-element array.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-linearvelocity"><code>linearVelocity</code></dfn> Linear velocity of the sensor given in meters per second in sitting space. MAY
be null if the sensor is incapable of providing linear velocity. When not null
MUST be a three-element array.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-linearacceleration"><code>linearAcceleration</code></dfn> Linear acceleration of the sensor given in meters per second squared in sitting
space. MAY be null if the sensor is incapable of providing linear acceleration.
When not null MUST be a three-element array.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-orientation"><code>orientation</code></dfn> Orientation of the sensor as a quaternion. The orientation yaw (rotation around
the Y axis) is relative to the initial yaw of the sensor when it was first read
or the yaw of the sensor at the point that <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose⑥">resetPose()</a></code> was last called. An
orientation of [0, 0, 0, 1] is considered to be "forward". MAY be null if the
sensor is incapable of providing orientation data. When not null MUST be a
four-element array.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-angularvelocity"><code>angularVelocity</code></dfn> Angular velocity of the sensor given in radians per second in sitting space. MAY
be null if the sensor is incapable of providing angular velocity. When not null
MUST be a three-element array.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRPose" data-dfn-type="attribute" data-export id="dom-vrpose-angularacceleration"><code>angularAcceleration</code></dfn> Angular acceleration of the sensor given in radians per second squared in
sitting space. MAY be null if the sensor is incapable of providing angular
acceleration. When not null MUST be a three-element array.</p>
   <div class="example" id="example-8e1fe1fc">
    <a class="self-link" href="#example-8e1fe1fc"></a> The following code snippet creates a WebGL-compatible matrix from a <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose⑥">VRPose</a></code>: 
<pre class="lang-js highlight"><c- a>function</c-> poseToMatrix <c- p>(</c->pose<c- p>)</c-> <c- p>{</c->
    <c- a>var</c-> out <c- o>=</c-> <c- k>new</c-> Float32Array<c- p>(</c-><c- mi>16</c-><c- p>);</c->

    <c- c1>// If the orientation or position are null, provide defaults.</c->
    <c- a>var</c-> q <c- o>=</c-> pose<c- p>.</c->orientation <c- o>?</c-> pose<c- p>.</c->orientation <c- o>:</c-> <c- p>[</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>1</c-><c- p>];</c->
    <c- a>var</c-> v <c- o>=</c-> pose<c- p>.</c->position <c- o>?</c-> pose<c- p>.</c->position <c- o>:</c-> <c- p>[</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>];</c->

    <c- c1>// Compute some values for the quaternion math.</c->
    <c- a>var</c-> x2 <c- o>=</c-> q<c- p>[</c-><c- mi>0</c-><c- p>]</c-> <c- o>+</c-> q<c- p>[</c-><c- mi>0</c-><c- p>];</c->
    <c- a>var</c-> y2 <c- o>=</c-> q<c- p>[</c-><c- mi>1</c-><c- p>]</c-> <c- o>+</c-> q<c- p>[</c-><c- mi>1</c-><c- p>];</c->
    <c- a>var</c-> z2 <c- o>=</c-> q<c- p>[</c-><c- mi>2</c-><c- p>]</c-> <c- o>+</c-> q<c- p>[</c-><c- mi>2</c-><c- p>];</c->

    <c- a>var</c-> xx <c- o>=</c-> q<c- p>[</c-><c- mi>0</c-><c- p>]</c-> <c- o>*</c-> x2<c- p>;</c->
    <c- a>var</c-> xy <c- o>=</c-> q<c- p>[</c-><c- mi>0</c-><c- p>]</c-> <c- o>*</c-> y2<c- p>;</c->
    <c- a>var</c-> xz <c- o>=</c-> q<c- p>[</c-><c- mi>0</c-><c- p>]</c-> <c- o>*</c-> z2<c- p>;</c->
    <c- a>var</c-> yy <c- o>=</c-> q<c- p>[</c-><c- mi>1</c-><c- p>]</c-> <c- o>*</c-> y2<c- p>;</c->
    <c- a>var</c-> yz <c- o>=</c-> q<c- p>[</c-><c- mi>1</c-><c- p>]</c-> <c- o>*</c-> z2<c- p>;</c->
    <c- a>var</c-> zz <c- o>=</c-> q<c- p>[</c-><c- mi>2</c-><c- p>]</c-> <c- o>*</c-> z2<c- p>;</c->
    <c- a>var</c-> wx <c- o>=</c-> q<c- p>[</c-><c- mi>3</c-><c- p>]</c-> <c- o>*</c-> x2<c- p>;</c->
    <c- a>var</c-> wy <c- o>=</c-> q<c- p>[</c-><c- mi>3</c-><c- p>]</c-> <c- o>*</c-> y2<c- p>;</c->
    <c- a>var</c-> wz <c- o>=</c-> q<c- p>[</c-><c- mi>3</c-><c- p>]</c-> <c- o>*</c-> z2<c- p>;</c->

    out<c- p>[</c-><c- mi>0</c-><c- p>]</c-> <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> <c- p>(</c->yy <c- o>+</c-> zz<c- p>);</c->
    out<c- p>[</c-><c- mi>1</c-><c- p>]</c-> <c- o>=</c-> xy <c- o>+</c-> wz<c- p>;</c->
    out<c- p>[</c-><c- mi>2</c-><c- p>]</c-> <c- o>=</c-> xz <c- o>-</c-> wy<c- p>;</c->
    out<c- p>[</c-><c- mi>3</c-><c- p>]</c-> <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
    out<c- p>[</c-><c- mi>4</c-><c- p>]</c-> <c- o>=</c-> xy <c- o>-</c-> wz<c- p>;</c->
    out<c- p>[</c-><c- mi>5</c-><c- p>]</c-> <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> <c- p>(</c->xx <c- o>+</c-> zz<c- p>);</c->
    out<c- p>[</c-><c- mi>6</c-><c- p>]</c-> <c- o>=</c-> yz <c- o>+</c-> wx<c- p>;</c->
    out<c- p>[</c-><c- mi>7</c-><c- p>]</c-> <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
    out<c- p>[</c-><c- mi>8</c-><c- p>]</c-> <c- o>=</c-> xz <c- o>+</c-> wy<c- p>;</c->
    out<c- p>[</c-><c- mi>9</c-><c- p>]</c-> <c- o>=</c-> yz <c- o>-</c-> wx<c- p>;</c->
    out<c- p>[</c-><c- mi>10</c-><c- p>]</c-> <c- o>=</c-> <c- mi>1</c-> <c- o>-</c-> <c- p>(</c->xx <c- o>+</c-> yy<c- p>);</c->
    out<c- p>[</c-><c- mi>11</c-><c- p>]</c-> <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
    out<c- p>[</c-><c- mi>12</c-><c- p>]</c-> <c- o>=</c-> v<c- p>[</c-><c- mi>0</c-><c- p>];</c->
    out<c- p>[</c-><c- mi>13</c-><c- p>]</c-> <c- o>=</c-> v<c- p>[</c-><c- mi>1</c-><c- p>];</c->
    out<c- p>[</c-><c- mi>14</c-><c- p>]</c-> <c- o>=</c-> v<c- p>[</c-><c- mi>2</c-><c- p>];</c->
    out<c- p>[</c-><c- mi>15</c-><c- p>]</c-> <c- o>=</c-> <c- mi>1</c-><c- p>;</c->

    <c- k>return</c-> out<c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.7" id="interface-vrframedata"><span class="secno">2.7. </span><span class="content">VRFrameData</span><a class="self-link" href="#interface-vrframedata"></a></h3>
   <p>The VRFrameData interface represents all the information needed to render a single frame of a VR scene.</p>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="VRFrameData" data-dfn-type="constructor" data-export data-lt="VRFrameData()" id="dom-vrframedata-vrframedata"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-vrframedata-vrframedata"></a></dfn>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrframedata"><code><c- g>VRFrameData</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-vrframedata-timestamp" id="ref-for-dom-vrframedata-timestamp"><c- g>timestamp</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑥"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-leftprojectionmatrix" id="ref-for-dom-vrframedata-leftprojectionmatrix"><c- g>leftProjectionMatrix</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑦"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-leftviewmatrix" id="ref-for-dom-vrframedata-leftviewmatrix"><c- g>leftViewMatrix</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑧"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-rightprojectionmatrix" id="ref-for-dom-vrframedata-rightprojectionmatrix"><c- g>rightProjectionMatrix</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑨"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-rightviewmatrix" id="ref-for-dom-vrframedata-rightviewmatrix"><c- g>rightViewMatrix</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrpose" id="ref-for-vrpose⑦"><c- n>VRPose</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRPose" href="#dom-vrframedata-pose" id="ref-for-dom-vrframedata-pose"><c- g>pose</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.7.1" id="vrframedata-attributes"><span class="secno">2.7.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrframedata-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-timestamp"><code>timestamp</code></dfn> Monotonically increasing value that allows the author to determine if position
state data been updated from the hardware. Since values are monotonically
increasing, they can be compared to determine the ordering of updates, as newer
values will always be greater than or equal to older values. The timestamp
starts at 0 the first time <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata④">getFrameData()</a></code> is invoked for a given <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④⑤">VRDisplay</a></code>.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-leftprojectionmatrix"><code>leftProjectionMatrix</code></dfn> A 4x4 matrix describing the projection to be used for the left eye’s rendering, given as a 16 element array in column major order. This value may be passed directly to WebGL’s uniformMatrix4fv function. It is highly recommended that applications use this matrix without modification. Failure to use this projection matrix when rendering may cause the presented frame to be distorted or badly aligned, resulting in varying degrees of user discomfort.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-leftviewmatrix"><code>leftViewMatrix</code></dfn> A 4x4 matrix describing the view transform to be used for the left eye’s rendering, given as a 16 element array in column major order. Represents the inverse of the model matrix of the left eye in sitting space. This value may be passed directly to WebGL’s uniformMatrix4fv function. It is highly recommended that applications use this matrix when rendering.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-rightprojectionmatrix"><code>rightProjectionMatrix</code></dfn> A 4x4 matrix describing the projection to be used for the right eye’s rendering, given as a 16 element array in column major order. This value may be passed directly to WebGL’s uniformMatrix4fv function. It is highly recommended that applications use this matrix without modification. Failure to use this projection matrix when rendering may cause the presented frame to be distorted or badly aligned, resulting in varying degrees of user discomfort.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-rightviewmatrix"><code>rightViewMatrix</code></dfn> A 4x4 matrix describing the view transform to be used for the right eye’s rendering, given as a 16 element array in column major order. Represents the inverse of the model matrix of the right eye in sitting space. This value may be passed directly to WebGL’s uniformMatrix4fv function. It is highly recommended that applications use this matrix when rendering.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRFrameData" data-dfn-type="attribute" data-export id="dom-vrframedata-pose"><code>pose</code></dfn> The <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose⑧">VRPose</a></code> of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④⑥">VRDisplay</a></code> at <code class="idl"><a data-link-type="idl" href="#dom-vrframedata-timestamp" id="ref-for-dom-vrframedata-timestamp①">timestamp</a></code>.</p>
   <h3 class="heading settled" data-level="2.8" id="interface-vreyeparameters"><span class="secno">2.8. </span><span class="content">VREyeParameters</span><a class="self-link" href="#interface-vreyeparameters"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#vreyeparameters" id="ref-for-vreyeparameters②">VREyeParameters</a></code> interface represents all the information required to correctly render a scene for a given eye.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vreyeparameters"><code><c- g>VREyeParameters</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①⓪"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vreyeparameters-offset" id="ref-for-dom-vreyeparameters-offset"><c- g>offset</c-></a>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrfieldofview" id="ref-for-vrfieldofview①"><c- n>VRFieldOfView</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRFieldOfView" href="#dom-vreyeparameters-fieldofview" id="ref-for-dom-vreyeparameters-fieldofview"><c- g>fieldOfView</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth"><c- g>renderWidth</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vreyeparameters-renderheight" id="ref-for-dom-vreyeparameters-renderheight"><c- g>renderHeight</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.8.1" id="vreyeparameters-attributes"><span class="secno">2.8.1. </span><span class="content">Attributes</span><a class="self-link" href="#vreyeparameters-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VREyeParameters" data-dfn-type="attribute" data-export id="dom-vreyeparameters-offset"><code>offset</code></dfn> A three component vector describing the offset from the center point between the users eyes to the center of the eye in meters. The x component of this vector SHOULD represent half of the user’s interpupillary distance (IPD), but MAY also represent the vector from the center point of the headset to the center point of the lens for the given eye. Values in the x component for left eye MUST be negative; values in the x component for right eye MUST be positive. This information should not be used to construct a view matrix, prefer using the view matricies provided in <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata④">VRFrameData</a></code> instead.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VREyeParameters" data-dfn-type="attribute" data-export id="dom-vreyeparameters-fieldofview"><code>fieldOfView</code></dfn> <i>(Deprecated)</i> The current field of view for the eye. SHOULD conservatively cover the entire viewable frustum of the eye. The application should not use these values to construct a projection matrix, as it may not take into account all aspects of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay④⑦">VRDisplay</a></code> optics. Prefer using the projection matrices provided in <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata⑤">VRFrameData</a></code> instead.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VREyeParameters" data-dfn-type="attribute" data-export id="dom-vreyeparameters-renderwidth"><code>renderWidth</code></dfn> Describes the recommended render target width of each eye viewport, in pixels. If multiple eyes are rendered in a single render target, then the render target should be made large enough to fit both viewports. The <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth①">renderWidth</a></code> for the left eye and right eye MUST NOT overlap, and the <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth②">renderWidth</a></code> for the right eye MUST be to the right of the <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth③">renderWidth</a></code> for the left eye.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VREyeParameters" data-dfn-type="attribute" data-export id="dom-vreyeparameters-renderheight"><code>renderHeight</code></dfn> Describes the recommended render target height of each eye viewport, in pixels. If multiple eyes are rendered in a single render target, then the render target should be made large enough to fit both viewports. The <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth④">renderWidth</a></code> for the left eye and right eye MUST NOT overlap, and the <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth⑤">renderWidth</a></code> for the right eye MUST be to the right of the <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth⑥">renderWidth</a></code> for the left eye.</p>
   <div class="example" id="example-02f41d78">
    <a class="self-link" href="#example-02f41d78"></a> Many HMDs will distort the rendered image to counteract undesired effects introduced by the headset optics. Because of this the optimal resolution of the canvas will often be larger than the HMD’s physical resolution to ensure that the final image presented to the user has a 1:1 pixel ratio at the center of the user’s view. The optimal canvas resolution can be calculated from the <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth⑦">renderWidth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-vreyeparameters-renderheight" id="ref-for-dom-vreyeparameters-renderheight①">renderHeight</a></code> for both eyes as follows: 
<pre class="lang-js highlight"><c- a>var</c-> leftEye <c- o>=</c-> vrDisplay<c- p>.</c->getEyeParameters<c- p>(</c-><c- u>"left"</c-><c- p>);</c->
<c- a>var</c-> rightEye <c- o>=</c-> vrDisplay<c- p>.</c->getEyeParameters<c- p>(</c-><c- u>"right"</c-><c- p>);</c->

canvas<c- p>.</c->width <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->leftEye<c- p>.</c->renderWidth<c- p>,</c-> rightEye<c- p>.</c->renderWidth<c- p>)</c-> <c- o>*</c-> <c- mi>2</c-><c- p>;</c->
canvas<c- p>.</c->height <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->leftEye<c- p>.</c->renderHeight<c- p>,</c-> rightEye<c- p>.</c->renderHeight<c- p>);</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.9" id="interface-vrstageparameters"><span class="secno">2.9. </span><span class="content">VRStageParameters</span><a class="self-link" href="#interface-vrstageparameters"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#vrstageparameters" id="ref-for-vrstageparameters②">VRStageParameters</a></code> interface represents the values describing the the stage/play area for devices that support room-scale experiences.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrstageparameters"><code><c- g>VRStageParameters</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrstageparameters-sittingtostandingtransform" id="ref-for-dom-vrstageparameters-sittingtostandingtransform①"><c- g>sittingToStandingTransform</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float②"><c- b>float</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="float" href="#dom-vrstageparameters-sizex" id="ref-for-dom-vrstageparameters-sizex"><c- g>sizeX</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float③"><c- b>float</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="float" href="#dom-vrstageparameters-sizez" id="ref-for-dom-vrstageparameters-sizez"><c- g>sizeZ</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.9.1" id="vrstageparameters-attributes"><span class="secno">2.9.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrstageparameters-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRStageParameters" data-dfn-type="attribute" data-export id="dom-vrstageparameters-sittingtostandingtransform"><code>sittingToStandingTransform</code></dfn> The <code class="idl"><a data-link-type="idl" href="#dom-vrstageparameters-sittingtostandingtransform" id="ref-for-dom-vrstageparameters-sittingtostandingtransform②">sittingToStandingTransform</a></code> attribute is a 16-element array containing the components of a 4x4 affine transformation matrix in column-major order. This matrix transforms the sitting-space view matrices of <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata⑥">VRFrameData</a></code> to standing-space. Multiplying the inverse of this matrix with the <code class="idl"><a data-link-type="idl" href="#dom-vrframedata-leftviewmatrix" id="ref-for-dom-vrframedata-leftviewmatrix①">leftViewMatrix</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-vrframedata-rightviewmatrix" id="ref-for-dom-vrframedata-rightviewmatrix①">rightViewMatrix</a></code> will result in a standing space view matrix for the respective eye.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRStageParameters" data-dfn-type="attribute" data-export id="dom-vrstageparameters-sizex"><code>sizeX</code></dfn> Width of the play-area bounds in meters. The bounds are defined as an axis-aligned rectangle on the floor. The center of the rectangle is at (0,0,0) in standing-space coordinates. These bounds are defined for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRStageParameters" data-dfn-type="attribute" data-export id="dom-vrstageparameters-sizez"><code>sizeZ</code></dfn> Depth of the play-area bounds in meters. The bounds are defined as an axis-aligned rectangle on the floor. The center of the rectangle is at (0,0,0) in standing-space coordinates. These bounds are defined for safety purposes. Content should not require the user to move beyond these bounds; however, it is possible for the user to ignore the bounds resulting in position values outside of this rectangle.</p>
   <h3 class="heading settled" data-level="2.10" id="interface-navigator"><span class="secno">2.10. </span><span class="content">Navigator Interface extension</span><a class="self-link" href="#interface-navigator"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator"><c- g>Navigator</c-></a> {
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay④⑧"><c- n>VRDisplay</c-></a>>> <a class="idl-code" data-link-type="method" href="#navigator-getvrdisplays-attribute" id="ref-for-navigator-getvrdisplays-attribute"><c- g>getVRDisplays</c-></a>();
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay④⑨"><c- n>VRDisplay</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<VRDisplay>" href="#navigator-activevrdisplays-attribute" id="ref-for-navigator-activevrdisplays-attribute"><c- g>activeVRDisplays</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.10.1" id="navigator-attributes"><span class="secno">2.10.1. </span><span class="content">Attributes</span><a class="self-link" href="#navigator-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Navigator" data-dfn-type="method" data-export id="navigator-getvrdisplays-attribute"><code>getVRDisplays()</code></dfn> Return a Promise which resolves to a list of available <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤⓪">VRDisplay</a></code>s.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Navigator" data-dfn-type="attribute" data-export id="navigator-activevrdisplays-attribute"><code>activeVRDisplays</code></dfn> <code class="idl"><a data-link-type="idl" href="#navigator-activevrdisplays-attribute" id="ref-for-navigator-activevrdisplays-attribute①">activeVRDisplays</a></code> includes every <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤①">VRDisplay</a></code> that is currently presenting.</p>
   <div class="example" id="example-effb094e">
    <a class="self-link" href="#example-effb094e"></a> The following code finds the first available <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤②">VRDisplay</a></code>. 
<pre class="lang-js highlight"><c- a>var</c-> vrDisplay<c- p>;</c->

navigator<c- p>.</c->getVRDisplays<c- p>().</c->then<c- p>(</c-><c- a>function</c-> <c- p>(</c->displays<c- p>)</c-> <c- p>{</c->
  <c- c1>// Use the first display in the array if one is available. If multiple</c->
  <c- c1>// displays are present, you may want to present the user with a way to</c->
  <c- c1>// select which display to use.</c->
  <c- k>if</c-> <c- p>(</c->displays<c- p>.</c->length <c- o>></c-> <c- mi>0</c-><c- p>)</c-> <c- p>{</c->
    vrDisplay <c- o>=</c-> displays<c- p>[</c-><c- mi>0</c-><c- p>];</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.11" id="interface-vrdisplayeventreason"><span class="secno">2.11. </span><span class="content">VRDisplayEventReason</span><a class="self-link" href="#interface-vrdisplayeventreason"></a></h3>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-vrdisplayeventreason"><code><c- g>VRDisplayEventReason</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-mounted" id="ref-for-dom-vrdisplayeventreason-mounted"><c- s>"mounted"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-navigation" id="ref-for-dom-vrdisplayeventreason-navigation"><c- s>"navigation"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-requested" id="ref-for-dom-vrdisplayeventreason-requested"><c- s>"requested"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-unmounted" id="ref-for-dom-vrdisplayeventreason-unmounted"><c- s>"unmounted"</c-></a>
};
</pre>
   <h4 class="heading settled" data-level="2.11.1" id="vrdisplayeventreason-codes"><span class="secno">2.11.1. </span><span class="content">Reasons</span><a class="self-link" href="#vrdisplayeventreason-codes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEventReason" data-dfn-type="enum-value" data-export data-lt="&quot;mounted&quot;|mounted" id="dom-vrdisplayeventreason-mounted"><code>mounted</code></dfn> The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤③">VRDisplay</a></code> has detected that the user has put it on.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEventReason" data-dfn-type="enum-value" data-export data-lt="&quot;navigation&quot;|navigation" id="dom-vrdisplayeventreason-navigation"><code>navigation</code></dfn> The page has been navigated to from a context that allows this page to begin presenting immediately, such as from another site that was already in VR presentation mode.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEventReason" data-dfn-type="enum-value" data-export data-lt="&quot;requested&quot;|requested" id="dom-vrdisplayeventreason-requested"><code>requested</code></dfn> The user agent MAY request start VR presentation mode. This allows user agents to include a consistent UI to enter VR across diferent sites.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEventReason" data-dfn-type="enum-value" data-export data-lt="&quot;unmounted&quot;|unmounted" id="dom-vrdisplayeventreason-unmounted"><code>unmounted</code></dfn> The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤④">VRDisplay</a></code> has detected that the user has taken it off.</p>
   <h3 class="heading settled" data-level="2.12" id="interface-vrdisplayevent"><span class="secno">2.12. </span><span class="content">VRDisplayEvent</span><a class="self-link" href="#interface-vrdisplayevent"></a></h3>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="VRDisplayEvent" data-dfn-type="constructor" data-export data-lt="VRDisplayEvent(type, eventInitDict)" id="dom-vrdisplayevent-vrdisplayevent"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-vrdisplayevent-vrdisplayevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplayEvent/VRDisplayEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-vrdisplayeventinit" id="ref-for-dictdef-vrdisplayeventinit"><c- n>VRDisplayEventInit</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplayEvent/VRDisplayEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-eventinitdict"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="vrdisplayevent"><code><c- g>VRDisplayEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay⑤⑤"><c- n>VRDisplay</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplay" href="#dom-vrdisplayevent-display" id="ref-for-dom-vrdisplayevent-display"><c- g>display</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-vrdisplayeventreason" id="ref-for-enumdef-vrdisplayeventreason"><c- n>VRDisplayEventReason</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplayEventReason?" href="#dom-vrdisplayevent-reason" id="ref-for-dom-vrdisplayevent-reason"><c- g>reason</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-vrdisplayeventinit"><code><c- g>VRDisplayEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay⑤⑥"><c- n>VRDisplay</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplayEventInit" data-dfn-type="dict-member" data-export data-type="VRDisplay " id="dom-vrdisplayeventinit-display"><code><c- g>display</c-></code><a class="self-link" href="#dom-vrdisplayeventinit-display"></a></dfn>;
  <a class="n" data-link-type="idl-name" href="#enumdef-vrdisplayeventreason" id="ref-for-enumdef-vrdisplayeventreason①"><c- n>VRDisplayEventReason</c-></a> <dfn class="idl-code" data-dfn-for="VRDisplayEventInit" data-dfn-type="dict-member" data-export data-type="VRDisplayEventReason " id="dom-vrdisplayeventinit-reason"><code><c- g>reason</c-></code><a class="self-link" href="#dom-vrdisplayeventinit-reason"></a></dfn>;
};
</pre>
   <h4 class="heading settled" data-level="2.12.1" id="vrdisplayevent-attributes"><span class="secno">2.12.1. </span><span class="content">Attributes</span><a class="self-link" href="#vrdisplayevent-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEvent" data-dfn-type="attribute" data-export id="dom-vrdisplayevent-display"><code>display</code></dfn> The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤⑦">VRDisplay</a></code> associated with this event.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="VRDisplayEvent" data-dfn-type="attribute" data-export id="dom-vrdisplayevent-reason"><code>reason</code></dfn> <code class="idl"><a data-link-type="idl" href="#enumdef-vrdisplayeventreason" id="ref-for-enumdef-vrdisplayeventreason②">VRDisplayEventReason</a></code> describing why this event has has been fired.</p>
   <h3 class="heading settled" data-level="2.13" id="interface-window"><span class="secno">2.13. </span><span class="content">Window Interface extension</span><a class="self-link" href="#interface-window"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window"><c- g>Window</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplayconnect"><code><c- g>onvrdisplayconnect</c-></code><a class="self-link" href="#dom-window-onvrdisplayconnect"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplaydisconnect"><code><c- g>onvrdisplaydisconnect</c-></code><a class="self-link" href="#dom-window-onvrdisplaydisconnect"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplayactivate"><code><c- g>onvrdisplayactivate</c-></code><a class="self-link" href="#dom-window-onvrdisplayactivate"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplaydeactivate"><code><c- g>onvrdisplaydeactivate</c-></code><a class="self-link" href="#dom-window-onvrdisplaydeactivate"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplayblur"><code><c- g>onvrdisplayblur</c-></code><a class="self-link" href="#dom-window-onvrdisplayblur"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplayfocus"><code><c- g>onvrdisplayfocus</c-></code><a class="self-link" href="#dom-window-onvrdisplayfocus"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑥"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplaypresentchange"><code><c- g>onvrdisplaypresentchange</c-></code><a class="self-link" href="#dom-window-onvrdisplaypresentchange"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑦"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplaypointerrestricted"><code><c- g>onvrdisplaypointerrestricted</c-></code><a class="self-link" href="#dom-window-onvrdisplaypointerrestricted"></a></dfn>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑧"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-window-onvrdisplaypointerunrestricted"><code><c- g>onvrdisplaypointerunrestricted</c-></code><a class="self-link" href="#dom-window-onvrdisplaypointerunrestricted"></a></dfn>;
};
</pre>
   <p>User agents implementing this specification MUST provide the following new DOM events. The corresponding events must be of type <code class="idl"><a data-link-type="idl" href="#vrdisplayevent" id="ref-for-vrdisplayevent">VRDisplayEvent</a></code> and must fire on the window object. Registration for and firing of the events must follow the usual behavior of DOM4 Events.</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-vrdisplayconnect-event"><code>onvrdisplayconnect</code><a class="self-link" href="#window-vrdisplayconnect-event"></a></dfn> A user agent MAY dispatch this event type to indicate that a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤⑧">VRDisplay</a></code> has been connected.</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-vrdisplaydisconnect-event"><code>onvrdisplaydisconnect</code><a class="self-link" href="#window-vrdisplaydisconnect-event"></a></dfn> A user agent MAY dispatch this event type to indicate that a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑤⑨">VRDisplay</a></code> has been disconnected.</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-vrdisplayactivate-event"><code>onvrdisplayactivate</code><a class="self-link" href="#window-vrdisplayactivate-event"></a></dfn> A user agent MAY dispatch this event type to indicate that something has occured which suggests the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⓪">VRDisplay</a></code> should be presented to. For example, if the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥①">VRDisplay</a></code> is capable of detecting when the user has put it on, this event SHOULD fire when they do so with the reason "mounted".</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-vrdisplaydeactivate-event"><code>onvrdisplaydeactivate</code><a class="self-link" href="#window-vrdisplaydeactivate-event"></a></dfn> A user agent MAY dispatch this event type to indicate that something has occured which suggests the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥②">VRDisplay</a></code> should exit presentation. For example, if the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥③">VRDisplay</a></code> is capable of detecting when the user has taken it off, this event SHOULD fire when they do so with the reason "unmounted".</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-onvrdisplayblur-event"><code>onvrdisplayblur</code><a class="self-link" href="#window-onvrdisplayblur-event"></a></dfn> A user agent MAY dispatch this event type to indicate that presentation to the display by the page is paused by the user agent, OS, or VR hardware. While a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥④">VRDisplay</a></code> is blurred it does not lose it’s presenting status (<code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-ispresenting" id="ref-for-dom-vrdisplay-ispresenting②">isPresenting</a></code> continues to report true) but <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getframedata" id="ref-for-dom-vrdisplay-getframedata⑤">getFrameData()</a></code> returns false without updating the provided <code class="idl"><a data-link-type="idl" href="#vrframedata" id="ref-for-vrframedata⑦">VRFrameData</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-getpose" id="ref-for-dom-vrdisplay-getpose③">getPose()</a></code> returns a <code class="idl"><a data-link-type="idl" href="#vrpose" id="ref-for-vrpose⑨">VRPose</a></code> with null members. This is to prevent tracking while the user interacts with potentially sensitive UI. For example: A user agent SHOULD blur the presenting application when the user is typing a URL into the browser with a virtual keyboard, otherwise the presenting page may be able to guess the URL the user is entering by tracking their head motions.</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-onvrdisplayfocus-event"><code>onvrdisplayfocus</code><a class="self-link" href="#window-onvrdisplayfocus-event"></a></dfn> A user agent MAY dispatch this event type to indicate that presentation to the display by the page has resumed after being blurred.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-onvrdisplaypointerrestricted-event"><code>onvrdisplaypointerrestricted</code></dfn> A user agent MAY dispatch this event type to indicate that pointer input is restricted to consumption via a <a href="http://w3c.github.io/pointerlock/">pointerlocked</a> element. This event MUST only be dispatched while the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⑤">VRDisplay</a></code> is presenting. Pages that wish to consume pointer input for HMD experiences are encouraged to call requestPointerLock in response to this event.</p>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-onvrdisplaypointerunrestricted-event"><code>onvrdisplaypointerunrestricted</code></dfn> A user agent MAY dispatch this event type to indicate that pointer input is no longer restricted to consumption via a <a href="http://w3c.github.io/pointerlock/">pointerlocked</a> element.  If the user agent has dispatched <code class="idl"><a data-link-type="idl" href="#window-onvrdisplaypointerrestricted-event" id="ref-for-window-onvrdisplaypointerrestricted-event">onvrdisplaypointerrestricted</a></code>, <code class="idl"><a data-link-type="idl" href="#window-onvrdisplaypointerunrestricted-event" id="ref-for-window-onvrdisplaypointerunrestricted-event">onvrdisplaypointerunrestricted</a></code> MUST be dispatched when pointer input is no longer restricted. When this event is dispatched, the user agent MAY release any existing <a href="http://w3c.github.io/pointerlock/">pointerlock</a>.</p>
   <p><dfn class="idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="window-vrdisplaypresentchange-event"><code>onvrdisplaypresentchange</code><a class="self-link" href="#window-vrdisplaypresentchange-event"></a></dfn> A user agent MUST dispatch this event type to indicate that a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⑥">VRDisplay</a></code> has begun or ended VR presentation. This event should not fire on subsequent calls to <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-requestpresent" id="ref-for-dom-vrdisplay-requestpresent①①">requestPresent()</a></code> after the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⑦">VRDisplay</a></code> has already begun VR presentation.</p>
   <h3 class="heading settled" data-level="2.14" id="interface-gamepad"><span class="secno">2.14. </span><span class="content">Gamepad Interface extension</span><a class="self-link" href="#interface-gamepad"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad"><c- g>Gamepad</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long④"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#gamepad-getvrdisplays-attribute" id="ref-for-gamepad-getvrdisplays-attribute"><c- g>displayId</c-></a>;
};
</pre>
   <h4 class="heading settled" data-level="2.14.1" id="gamepad-attributes"><span class="secno">2.14.1. </span><span class="content">Attributes</span><a class="self-link" href="#gamepad-attributes"></a></h4>
   <p><dfn class="dfn-paneled idl-code" data-dfn-for="Gamepad" data-dfn-type="attribute" data-export id="gamepad-getvrdisplays-attribute"><code>displayId</code></dfn> Return the <code class="idl"><a data-link-type="idl" href="#dom-vrdisplay-displayid" id="ref-for-dom-vrdisplay-displayid">displayId</a></code> of the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⑧">VRDisplay</a></code> this <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad①">Gamepad</a></code> is associated with. A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad②">Gamepad</a></code> is considered to be associated with a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑥⑨">VRDisplay</a></code> if it reports a pose that is in the same space as the <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦⓪">VRDisplay</a></code> pose. If the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad③">Gamepad</a></code> is not associated with a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦①">VRDisplay</a></code> should return 0.</p>
   <h2 class="heading settled" data-level="3" id="security"><span class="secno">3. </span><span class="content">Security Considerations</span><a class="self-link" href="#security"></a></h2>
   <p>While not directly affecting the API interface and Web IDL, WebVR implementations should maintain the user’s expectations of privacy, security, and comfort on the Web by adhering to the following guidelines:</p>
   <ul>
    <li data-md>
     <p>Trusted UI must be drawn by an independent rendering context whose state is isolated from that of the WebGL contexts provided as a <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①②">VRLayerInit</a></code> source to a <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦②">VRDisplay</a></code>.</p>
    <li data-md>
     <p>A "VR Compositor" runs asynchronously from content, responsible for compositing the trusted and untrusted content. If content is not performant or does not submit frames, or terminates unexpectedly the browser should be able to continue presenting a responsive front-end.</p>
    <li data-md>
     <p>Users should always be provided an action, such as pressing a reserved hardware button or performing a gesture, that escapes out of WebVR content and displays the browsers trusted UI.</p>
    <li data-md>
     <p>When navigating between pages in VR the browser should display trusted UI elements informing the user of the security information of the site they are navigating to which is normally presented by the 2D UI, such as the URL and encryption status.</p>
    <li data-md>
     <p>The <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦③">VRDisplay</a></code> pose and other VR inputs are only updated for the focused page.</p>
    <li data-md>
     <p>The Gamepad API will be updated such that the gamepad inputs are only updated for the focused page.</p>
    <li data-md>
     <p>Non-focused tabs are allowed to enumerate <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad④">Gamepad</a></code>s and <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦④">VRDisplay</a></code>s but will see last received state or default values.</p>
    <li data-md>
     <p>To prevent CORS-related vulnerabilities, each page will see a new instance of objects returned by the WebVR API, such as <code class="idl"><a data-link-type="idl" href="#vrdisplay" id="ref-for-vrdisplay⑦⑤">VRDisplay</a></code>. Attributes such as the <code class="idl"><a data-link-type="idl" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①③">VRLayerInit</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source④">source</a></code> set by one page must not be able to be read by another.</p>
   </ul>
   <h2 class="heading settled" data-level="4" id="ack"><span class="secno">4. </span><span class="content">Acknowledgements</span><a class="self-link" href="#ack"></a></h2>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#navigator-activevrdisplays-attribute">activeVRDisplays</a><span>, in §2.10.1</span>
   <li><a href="#dom-vrpose-angularacceleration">angularAcceleration</a><span>, in §2.6.1</span>
   <li><a href="#dom-vrpose-angularvelocity">angularVelocity</a><span>, in §2.6.1</span>
   <li><a href="#dom-vrdisplay-cancelanimationframe①">cancelAnimationFrame()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-cancelanimationframe">cancelAnimationFrame(handle)</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplaycapabilities-canpresent">canPresent</a><span>, in §2.3.1</span>
   <li><a href="#dom-vrdisplay-capabilities">capabilities</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-depthfar">depthFar</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplay-depthnear">depthNear</a><span>, in §2.1</span>
   <li>
    display
    <ul>
     <li><a href="#dom-vrdisplayevent-display">attribute for VRDisplayEvent</a><span>, in §2.12.1</span>
     <li><a href="#dom-vrdisplayeventinit-display">dict-member for VRDisplayEventInit</a><span>, in §2.12</span>
    </ul>
   <li>
    displayId
    <ul>
     <li><a href="#gamepad-getvrdisplays-attribute">attribute for Gamepad</a><span>, in §2.14.1</span>
     <li><a href="#dom-vrdisplay-displayid">attribute for VRDisplay</a><span>, in §2.1</span>
    </ul>
   <li><a href="#dom-vrdisplay-displayname">displayName</a><span>, in §2.1</span>
   <li><a href="#dom-vrfieldofview-downdegrees">downDegrees</a><span>, in §2.5</span>
   <li><a href="#dom-vrdisplay-exitpresent">exitPresent()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vreyeparameters-fieldofview">fieldOfView</a><span>, in §2.8.1</span>
   <li><a href="#dom-vrdisplay-geteyeparameters①">getEyeParameters()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-geteyeparameters">getEyeParameters(whichEye)</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplay-getframedata①">getFrameData()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-getframedata">getFrameData(frameData)</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplay-getlayers">getLayers()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-getpose">getPose()</a><span>, in §2.1.1</span>
   <li><a href="#navigator-getvrdisplays-attribute">getVRDisplays()</a><span>, in §2.10.1</span>
   <li><a href="#dom-vrdisplaycapabilities-hasexternaldisplay">hasExternalDisplay</a><span>, in §2.3.1</span>
   <li><a href="#dom-vrdisplaycapabilities-hasorientation">hasOrientation</a><span>, in §2.3.1</span>
   <li><a href="#dom-vrdisplaycapabilities-hasposition">hasPosition</a><span>, in §2.3.1</span>
   <li><a href="#dom-vrdisplay-isconnected">isConnected</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-ispresenting">isPresenting</a><span>, in §2.1.1</span>
   <li><a href="#dom-vreye-left">"left"</a><span>, in §2.4</span>
   <li><a href="#dom-vrlayerinit-leftbounds">leftBounds</a><span>, in §2.2.1</span>
   <li><a href="#dom-vrfieldofview-leftdegrees">leftDegrees</a><span>, in §2.5</span>
   <li><a href="#dom-vrframedata-leftprojectionmatrix">leftProjectionMatrix</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrframedata-leftviewmatrix">leftViewMatrix</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrpose-linearacceleration">linearAcceleration</a><span>, in §2.6.1</span>
   <li><a href="#dom-vrpose-linearvelocity">linearVelocity</a><span>, in §2.6.1</span>
   <li><a href="#dom-vrdisplaycapabilities-maxlayers">maxLayers</a><span>, in §2.3.1</span>
   <li><a href="#dom-vrdisplayeventreason-mounted">mounted</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplayeventreason-mounted">"mounted"</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplayeventreason-navigation">navigation</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplayeventreason-navigation">"navigation"</a><span>, in §2.11.1</span>
   <li><a href="#dom-vreyeparameters-offset">offset</a><span>, in §2.8.1</span>
   <li>
    onvrdisplayactivate
    <ul>
     <li><a href="#dom-window-onvrdisplayactivate">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-vrdisplayactivate-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplayblur
    <ul>
     <li><a href="#dom-window-onvrdisplayblur">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-onvrdisplayblur-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplayconnect
    <ul>
     <li><a href="#dom-window-onvrdisplayconnect">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-vrdisplayconnect-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplaydeactivate
    <ul>
     <li><a href="#dom-window-onvrdisplaydeactivate">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-vrdisplaydeactivate-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplaydisconnect
    <ul>
     <li><a href="#dom-window-onvrdisplaydisconnect">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-vrdisplaydisconnect-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplayfocus
    <ul>
     <li><a href="#dom-window-onvrdisplayfocus">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-onvrdisplayfocus-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplaypointerrestricted
    <ul>
     <li><a href="#dom-window-onvrdisplaypointerrestricted">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-onvrdisplaypointerrestricted-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplaypointerunrestricted
    <ul>
     <li><a href="#dom-window-onvrdisplaypointerunrestricted">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-onvrdisplaypointerunrestricted-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li>
    onvrdisplaypresentchange
    <ul>
     <li><a href="#dom-window-onvrdisplaypresentchange">attribute for Window</a><span>, in §2.13</span>
     <li><a href="#window-vrdisplaypresentchange-event">event for Window</a><span>, in §2.13</span>
    </ul>
   <li><a href="#dom-vrpose-orientation">orientation</a><span>, in §2.6.1</span>
   <li><a href="#dom-vrframedata-pose">pose</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrpose-position">position</a><span>, in §2.6.1</span>
   <li>
    reason
    <ul>
     <li><a href="#dom-vrdisplayevent-reason">attribute for VRDisplayEvent</a><span>, in §2.12.1</span>
     <li><a href="#dom-vrdisplayeventinit-reason">dict-member for VRDisplayEventInit</a><span>, in §2.12</span>
    </ul>
   <li><a href="#dom-vreyeparameters-renderheight">renderHeight</a><span>, in §2.8.1</span>
   <li><a href="#dom-vreyeparameters-renderwidth">renderWidth</a><span>, in §2.8.1</span>
   <li><a href="#dom-vrdisplay-requestanimationframe①">requestAnimationFrame()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-requestanimationframe">requestAnimationFrame(callback)</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplayeventreason-requested">"requested"</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplayeventreason-requested">requested</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplay-requestpresent①">requestPresent()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrdisplay-requestpresent">requestPresent(layers)</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplay-resetpose">resetPose()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vreye-right">"right"</a><span>, in §2.4</span>
   <li><a href="#dom-vrlayerinit-rightbounds">rightBounds</a><span>, in §2.2.1</span>
   <li><a href="#dom-vrfieldofview-rightdegrees">rightDegrees</a><span>, in §2.5</span>
   <li><a href="#dom-vrframedata-rightprojectionmatrix">rightProjectionMatrix</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrframedata-rightviewmatrix">rightViewMatrix</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrstageparameters-sittingtostandingtransform">sittingToStandingTransform</a><span>, in §2.9.1</span>
   <li><a href="#dom-vrstageparameters-sizex">sizeX</a><span>, in §2.9.1</span>
   <li><a href="#dom-vrstageparameters-sizez">sizeZ</a><span>, in §2.9.1</span>
   <li><a href="#dom-vrlayerinit-source">source</a><span>, in §2.2.1</span>
   <li><a href="#dom-vrdisplay-stageparameters">stageParameters</a><span>, in §2.1</span>
   <li><a href="#dom-vrdisplay-submitframe">submitFrame()</a><span>, in §2.1.1</span>
   <li><a href="#dom-vrframedata-timestamp">timestamp</a><span>, in §2.7.1</span>
   <li><a href="#dom-vrdisplayeventreason-unmounted">unmounted</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrdisplayeventreason-unmounted">"unmounted"</a><span>, in §2.11.1</span>
   <li><a href="#dom-vrfieldofview-updegrees">upDegrees</a><span>, in §2.5</span>
   <li><a href="#vrdisplay">VRDisplay</a><span>, in §2.1</span>
   <li><a href="#vrdisplaycapabilities">VRDisplayCapabilities</a><span>, in §2.3</span>
   <li><a href="#vrdisplayevent">VRDisplayEvent</a><span>, in §2.12</span>
   <li><a href="#dictdef-vrdisplayeventinit">VRDisplayEventInit</a><span>, in §2.12</span>
   <li><a href="#enumdef-vrdisplayeventreason">VRDisplayEventReason</a><span>, in §2.11</span>
   <li><a href="#dom-vrdisplayevent-vrdisplayevent">VRDisplayEvent(type, eventInitDict)</a><span>, in §2.12</span>
   <li><a href="#enumdef-vreye">VREye</a><span>, in §2.4</span>
   <li><a href="#vreyeparameters">VREyeParameters</a><span>, in §2.8</span>
   <li><a href="#vrfieldofview">VRFieldOfView</a><span>, in §2.5</span>
   <li><a href="#dom-vrframedata-vrframedata">VRFrameData()</a><span>, in §2.7</span>
   <li><a href="#vrframedata">VRFrameData</a><span>, in §2.7</span>
   <li><a href="#dictdef-vrlayerinit">VRLayerInit</a><span>, in §2.2</span>
   <li><a href="#vrpose">VRPose</a><span>, in §2.6</span>
   <li><a href="#typedefdef-vrsource">VRSource</a><span>, in §2.2</span>
   <li><a href="#vrstageparameters">VRStageParameters</a><span>, in §2.9</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">2.13. Window Interface extension</a> <a href="#ref-for-eventhandler①">(2)</a> <a href="#ref-for-eventhandler②">(3)</a> <a href="#ref-for-eventhandler③">(4)</a> <a href="#ref-for-eventhandler④">(5)</a> <a href="#ref-for-eventhandler⑤">(6)</a> <a href="#ref-for-eventhandler⑥">(7)</a> <a href="#ref-for-eventhandler⑦">(8)</a> <a href="#ref-for-eventhandler⑧">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-framerequestcallback">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#framerequestcallback">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#framerequestcallback</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-framerequestcallback">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlcanvaselement">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement">https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlcanvaselement">2.2. VRLayerInit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-navigator">
   <a href="https://html.spec.whatwg.org/multipage/system-state.html#navigator">https://html.spec.whatwg.org/multipage/system-state.html#navigator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigator">2.10. Navigator Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.1. VRDisplay</a>
    <li><a href="#ref-for-idl-DOMString①">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-Float32Array">
   <a href="https://heycam.github.io/webidl/#idl-Float32Array">https://heycam.github.io/webidl/#idl-Float32Array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-Float32Array">2.6. VRPose</a> <a href="#ref-for-idl-Float32Array①">(2)</a> <a href="#ref-for-idl-Float32Array②">(3)</a> <a href="#ref-for-idl-Float32Array③">(4)</a> <a href="#ref-for-idl-Float32Array④">(5)</a> <a href="#ref-for-idl-Float32Array⑤">(6)</a>
    <li><a href="#ref-for-idl-Float32Array⑥">2.7. VRFrameData</a> <a href="#ref-for-idl-Float32Array⑦">(2)</a> <a href="#ref-for-idl-Float32Array⑧">(3)</a> <a href="#ref-for-idl-Float32Array⑨">(4)</a>
    <li><a href="#ref-for-idl-Float32Array①⓪">2.8. VREyeParameters</a>
    <li><a href="#ref-for-idl-Float32Array①①">2.9. VRStageParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NewObject">
   <a href="https://heycam.github.io/webidl/#NewObject">https://heycam.github.io/webidl/#NewObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NewObject">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">2.1. VRDisplay</a>
    <li><a href="#ref-for-SameObject①">2.8. VREyeParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2.1. VRDisplay</a> <a href="#ref-for-idl-boolean①">(2)</a> <a href="#ref-for-idl-boolean②">(3)</a>
    <li><a href="#ref-for-idl-boolean③">2.3. VRDisplayCapabilities</a> <a href="#ref-for-idl-boolean④">(2)</a> <a href="#ref-for-idl-boolean⑤">(3)</a> <a href="#ref-for-idl-boolean⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">2.1. VRDisplay</a> <a href="#ref-for-idl-double①">(2)</a>
    <li><a href="#ref-for-idl-double②">2.5. VRFieldOfView</a> <a href="#ref-for-idl-double③">(2)</a> <a href="#ref-for-idl-double④">(3)</a> <a href="#ref-for-idl-double⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-float">
   <a href="https://heycam.github.io/webidl/#idl-float">https://heycam.github.io/webidl/#idl-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-float">2.2. VRLayerInit</a> <a href="#ref-for-idl-float①">(2)</a>
    <li><a href="#ref-for-idl-float②">2.9. VRStageParameters</a> <a href="#ref-for-idl-float③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-long">
   <a href="https://heycam.github.io/webidl/#idl-long">https://heycam.github.io/webidl/#idl-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-long">2.1. VRDisplay</a> <a href="#ref-for-idl-long①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">2.1. VRDisplay</a>
    <li><a href="#ref-for-idl-unsigned-long①">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-idl-unsigned-long②">2.8. VREyeParameters</a> <a href="#ref-for-idl-unsigned-long③">(2)</a>
    <li><a href="#ref-for-idl-unsigned-long④">2.14. Gamepad Interface extension</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-framerequestcallback" style="color:initial">FrameRequestCallback</span>
     <li><span class="dfn-paneled" id="term-for-htmlcanvaselement" style="color:initial">HTMLCanvasElement</span>
     <li><span class="dfn-paneled" id="term-for-navigator" style="color:initial">Navigator</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-idl-Float32Array" style="color:initial">Float32Array</span>
     <li><span class="dfn-paneled" id="term-for-NewObject" style="color:initial">NewObject</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-idl-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-idl-long" style="color:initial">long</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>interface</c-> <a href="#vrdisplay"><code><c- g>VRDisplay</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑦"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplay-isconnected" id="ref-for-dom-vrdisplay-isconnected②"><c- g>isConnected</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplay-ispresenting" id="ref-for-dom-vrdisplay-ispresenting③"><c- g>isPresenting</c-></a>;

  /**
   * Dictionary of capabilities describing the VRDisplay.
   */
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrdisplaycapabilities" id="ref-for-vrdisplaycapabilities④"><c- n>VRDisplayCapabilities</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplayCapabilities" href="#dom-vrdisplay-capabilities" id="ref-for-dom-vrdisplay-capabilities②"><c- g>capabilities</c-></a>;

  /**
   * If this VRDisplay supports room-scale experiences, the optional
   * stage attribute contains details on the room-scale parameters.
   * The stageParameters attribute can not change between null
   * and non-null once the VRDisplay is enumerated; however,
   * the values within VRStageParameters may change after
   * any call to VRDisplay.submitFrame as the user may re-configure
   * their environment at any time.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrstageparameters" id="ref-for-vrstageparameters③"><c- n>VRStageParameters</c-></a>? <a data-readonly data-type="VRStageParameters?" href="#dom-vrdisplay-stageparameters"><code><c- g>stageParameters</c-></code></a>;

  /**
   * Return the current VREyeParameters for the given eye.
   */
  <a class="n" data-link-type="idl-name" href="#vreyeparameters" id="ref-for-vreyeparameters③"><c- n>VREyeParameters</c-></a> <a href="#dom-vrdisplay-geteyeparameters"><code><c- g>getEyeParameters</c-></code></a>(<a class="n" data-link-type="idl-name" href="#enumdef-vreye" id="ref-for-enumdef-vreye①"><c- n>VREye</c-></a> <a href="#dom-vrdisplay-geteyeparameters-whicheye-whicheye"><code><c- g>whichEye</c-></code></a>);

  /**
   * An identifier for this distinct VRDisplay. Used as an
   * association point in the Gamepad API.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑤"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-vrdisplay-displayid"><code><c- g>displayId</c-></code></a>;

  /**
   * A display name, a user-readable name identifying it.
   */
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-vrdisplay-displayname"><code><c- g>displayName</c-></code></a>;

  /**
   * Populates the passed VRFrameData with the information required to render
   * the current frame. The value provided will not change until JavaScript has
   * returned control to the browser. Only valid to call in a
   * VRDisplay.requestAnimationFrame callback.
   */
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a href="#dom-vrdisplay-getframedata"><code><c- g>getFrameData</c-></code></a>(<a class="n" data-link-type="idl-name" href="#vrframedata" id="ref-for-vrframedata⑧"><c- n>VRFrameData</c-></a> <a href="#dom-vrdisplay-getframedata-framedata-framedata"><code><c- g>frameData</c-></code></a>);

  /**
   * Return a VRPose containing the future predicted pose of the VRDisplay
   * when the current frame will be presented. The value returned will not
   * change until JavaScript has returned control to the browser.
   *
   * The VRPose will contain the position, orientation, velocity,
   * and acceleration of each of these properties.
   */
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#vrpose" id="ref-for-vrpose①⓪"><c- n>VRPose</c-></a> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-getpose" id="ref-for-dom-vrdisplay-getpose④"><c- g>getPose</c-></a>();

  /**
   * Reset the pose for this display, treating its current position and
   * orientation as the "origin/zero" values. VRPose.position,
   * VRPose.orientation, and VRStageParameters.sittingToStandingTransform may be
   * updated when calling resetPose(). This should be called in only
   * sitting-space experiences.
   */
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-resetpose" id="ref-for-dom-vrdisplay-resetpose⑦"><c- g>resetPose</c-></a>();

  /**
   * z-depth defining the near plane of the eye view frustum
   * enables mapping of values in the render target depth
   * attachment to scene coordinates. Initially set to 0.01.
   */
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a> <a data-type="double" href="#dom-vrdisplay-depthnear"><code><c- g>depthNear</c-></code></a>;

  /**
   * z-depth defining the far plane of the eye view frustum
   * enables mapping of values in the render target depth
   * attachment to scene coordinates. Initially set to 10000.0.
   */
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a data-type="double" href="#dom-vrdisplay-depthfar"><code><c- g>depthFar</c-></code></a>;

  /**
   * The callback passed to `requestAnimationFrame` will be called
   * any time a new frame should be rendered. When the VRDisplay is
   * presenting the callback will be called at the native refresh
   * rate of the HMD. When not presenting this function acts
   * identically to how window.requestAnimationFrame acts. Content should
   * make no assumptions of frame rate or vsync behavior as the HMD runs
   * asynchronously from other displays and at differing refresh rates.
   */
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long②"><c- b>long</c-></a> <a href="#dom-vrdisplay-requestanimationframe"><code><c- g>requestAnimationFrame</c-></code></a>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#framerequestcallback" id="ref-for-framerequestcallback①"><c- n>FrameRequestCallback</c-></a> <a href="#dom-vrdisplay-requestanimationframe-callback-callback"><code><c- g>callback</c-></code></a>);

  /**
   * Passing the value returned by `requestAnimationFrame` to
   * `cancelAnimationFrame` will unregister the callback.
   */
  <c- b>void</c-> <a href="#dom-vrdisplay-cancelanimationframe"><code><c- g>cancelAnimationFrame</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①①"><c- b>long</c-></a> <a href="#dom-vrdisplay-cancelanimationframe-handle-handle"><code><c- g>handle</c-></code></a>);

  /**
   * Begin presenting to the VRDisplay. Must be called in response to a user gesture.
   * Repeat calls while already presenting will update the layers being displayed.
   * If the number of values in the leftBounds/rightBounds arrays is not 0 or 4 for any of the passed layers the promise is rejected
   * If the source of any of the layers is not present (null), the promise is rejected.
   */
  <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-vrdisplay-requestpresent"><code><c- g>requestPresent</c-></code></a>(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①④"><c- n>VRLayerInit</c-></a>> <a href="#dom-vrdisplay-requestpresent-layers-layers"><code><c- g>layers</c-></code></a>);

  /**
   * Stops presenting to the VRDisplay.
   */
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-exitpresent" id="ref-for-dom-vrdisplay-exitpresent①"><c- g>exitPresent</c-></a>();

  /**
   * Get the layers currently being presented.
   */
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-vrlayerinit" id="ref-for-dictdef-vrlayerinit①⑤"><c- n>VRLayerInit</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-getlayers" id="ref-for-dom-vrdisplay-getlayers①"><c- g>getLayers</c-></a>();

  /**
   * The layer provided to the VRDisplay will be captured and presented
   * in the HMD. Calling this function has the same effect on the source
   * canvas as any other operation that uses its source image, and canvases
   * created without preserveDrawingBuffer set to true will be cleared. Only
   * valid to call in a VRDisplay.requestAnimationFrame callback.
   */
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-vrdisplay-submitframe" id="ref-for-dom-vrdisplay-submitframe④"><c- g>submitFrame</c-></a>();
};

<c- b>typedef</c-> (<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement" id="ref-for-htmlcanvaselement①"><c- n>HTMLCanvasElement</c-></a> <c- b>or</c->
         <a class="n" data-link-type="idl-name" href="https://wiki.whatwg.org/wiki/OffscreenCanvas#offscreencanvas" id="ref-for-offscreencanvas①"><c- n>OffscreenCanvas</c-></a>) <a href="#typedefdef-vrsource"><code><c- g>VRSource</c-></code></a>;

<c- b>dictionary</c-> <a href="#dictdef-vrlayerinit"><code><c- g>VRLayerInit</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="#typedefdef-vrsource" id="ref-for-typedefdef-vrsource③①"><c- n>VRSource</c-></a>? <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="VRSource? " href="#dom-vrlayerinit-source" id="ref-for-dom-vrlayerinit-source⑤"><c- g>source</c-></a> = <c- b>null</c->;

  <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float④"><c- b>float</c-></a>> <a class="idl-code" data-default="[]" data-link-type="dict-member" data-type="sequence<float> " href="#dom-vrlayerinit-leftbounds" id="ref-for-dom-vrlayerinit-leftbounds③"><c- g>leftBounds</c-></a> = [ ];
  <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float①①"><c- b>float</c-></a>> <a class="idl-code" data-default="[]" data-link-type="dict-member" data-type="sequence<float> " href="#dom-vrlayerinit-rightbounds" id="ref-for-dom-vrlayerinit-rightbounds③"><c- g>rightBounds</c-></a> = [ ];
};

<c- b>interface</c-> <a href="#vrdisplaycapabilities"><code><c- g>VRDisplayCapabilities</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasposition" id="ref-for-dom-vrdisplaycapabilities-hasposition③"><c- g>hasPosition</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasorientation" id="ref-for-dom-vrdisplaycapabilities-hasorientation②"><c- g>hasOrientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-hasexternaldisplay" id="ref-for-dom-vrdisplaycapabilities-hasexternaldisplay②"><c- g>hasExternalDisplay</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑥①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-vrdisplaycapabilities-canpresent" id="ref-for-dom-vrdisplaycapabilities-canpresent①①"><c- g>canPresent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vrdisplaycapabilities-maxlayers" id="ref-for-dom-vrdisplaycapabilities-maxlayers①①"><c- g>maxLayers</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-vreye"><code><c- g>VREye</c-></code></a> {
  <a href="#dom-vreye-left"><code><c- s>"left"</c-></code></a>,
  <a href="#dom-vreye-right"><code><c- s>"right"</c-></code></a>
};

<c- b>interface</c-> <a href="#vrfieldofview"><code><c- g>VRFieldOfView</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-vrfieldofview-updegrees"><code><c- g>upDegrees</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-vrfieldofview-rightdegrees"><code><c- g>rightDegrees</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-vrfieldofview-downdegrees"><code><c- g>downDegrees</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-vrfieldofview-leftdegrees"><code><c- g>leftDegrees</c-></code></a>;
};

<c- b>interface</c-> <a href="#vrpose"><code><c- g>VRPose</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①③"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-position" id="ref-for-dom-vrpose-position①"><c- g>position</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①②"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-linearvelocity" id="ref-for-dom-vrpose-linearvelocity①"><c- g>linearVelocity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array②①"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-linearacceleration" id="ref-for-dom-vrpose-linearacceleration①"><c- g>linearAcceleration</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array③①"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-orientation" id="ref-for-dom-vrpose-orientation①"><c- g>orientation</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array④①"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-angularvelocity" id="ref-for-dom-vrpose-angularvelocity①"><c- g>angularVelocity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑤①"><c- b>Float32Array</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array?" href="#dom-vrpose-angularacceleration" id="ref-for-dom-vrpose-angularacceleration①"><c- g>angularAcceleration</c-></a>;
};

[<a href="#dom-vrframedata-vrframedata"><code><c- g>Constructor</c-></code></a>]
<c- b>interface</c-> <a href="#vrframedata"><code><c- g>VRFrameData</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-vrframedata-timestamp" id="ref-for-dom-vrframedata-timestamp②"><c- g>timestamp</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑥①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-leftprojectionmatrix" id="ref-for-dom-vrframedata-leftprojectionmatrix①"><c- g>leftProjectionMatrix</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑦①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-leftviewmatrix" id="ref-for-dom-vrframedata-leftviewmatrix②"><c- g>leftViewMatrix</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑧①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-rightprojectionmatrix" id="ref-for-dom-vrframedata-rightprojectionmatrix①"><c- g>rightProjectionMatrix</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array⑨①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrframedata-rightviewmatrix" id="ref-for-dom-vrframedata-rightviewmatrix②"><c- g>rightViewMatrix</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrpose" id="ref-for-vrpose⑦①"><c- n>VRPose</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRPose" href="#dom-vrframedata-pose" id="ref-for-dom-vrframedata-pose①"><c- g>pose</c-></a>;
};

<c- b>interface</c-> <a href="#vreyeparameters"><code><c- g>VREyeParameters</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①⓪①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vreyeparameters-offset" id="ref-for-dom-vreyeparameters-offset①"><c- g>offset</c-></a>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrfieldofview" id="ref-for-vrfieldofview①①"><c- n>VRFieldOfView</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRFieldOfView" href="#dom-vreyeparameters-fieldofview" id="ref-for-dom-vreyeparameters-fieldofview①"><c- g>fieldOfView</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vreyeparameters-renderwidth" id="ref-for-dom-vreyeparameters-renderwidth⑧"><c- g>renderWidth</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-vreyeparameters-renderheight" id="ref-for-dom-vreyeparameters-renderheight②"><c- g>renderHeight</c-></a>;
};

<c- b>interface</c-> <a href="#vrstageparameters"><code><c- g>VRStageParameters</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①①①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Float32Array" href="#dom-vrstageparameters-sittingtostandingtransform" id="ref-for-dom-vrstageparameters-sittingtostandingtransform①①"><c- g>sittingToStandingTransform</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float②①"><c- b>float</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="float" href="#dom-vrstageparameters-sizex" id="ref-for-dom-vrstageparameters-sizex①"><c- g>sizeX</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-float" id="ref-for-idl-float③①"><c- b>float</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="float" href="#dom-vrstageparameters-sizez" id="ref-for-dom-vrstageparameters-sizez①"><c- g>sizeZ</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator①"><c- g>Navigator</c-></a> {
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay④⑧①"><c- n>VRDisplay</c-></a>>> <a class="idl-code" data-link-type="method" href="#navigator-getvrdisplays-attribute" id="ref-for-navigator-getvrdisplays-attribute①"><c- g>getVRDisplays</c-></a>();
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay④⑨①"><c- n>VRDisplay</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<VRDisplay>" href="#navigator-activevrdisplays-attribute" id="ref-for-navigator-activevrdisplays-attribute②"><c- g>activeVRDisplays</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-vrdisplayeventreason"><code><c- g>VRDisplayEventReason</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-mounted" id="ref-for-dom-vrdisplayeventreason-mounted①"><c- s>"mounted"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-navigation" id="ref-for-dom-vrdisplayeventreason-navigation①"><c- s>"navigation"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-requested" id="ref-for-dom-vrdisplayeventreason-requested①"><c- s>"requested"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-vrdisplayeventreason-unmounted" id="ref-for-dom-vrdisplayeventreason-unmounted①"><c- s>"unmounted"</c-></a>
};

[<a href="#dom-vrdisplayevent-vrdisplayevent"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-vrdisplayeventinit" id="ref-for-dictdef-vrdisplayeventinit①"><c- n>VRDisplayEventInit</c-></a> <a href="#dom-vrdisplayevent-vrdisplayevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>)]
<c- b>interface</c-> <a href="#vrdisplayevent"><code><c- g>VRDisplayEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay⑤⑤①"><c- n>VRDisplay</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplay" href="#dom-vrdisplayevent-display" id="ref-for-dom-vrdisplayevent-display①"><c- g>display</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-vrdisplayeventreason" id="ref-for-enumdef-vrdisplayeventreason③"><c- n>VRDisplayEventReason</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="VRDisplayEventReason?" href="#dom-vrdisplayevent-reason" id="ref-for-dom-vrdisplayevent-reason①"><c- g>reason</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-vrdisplayeventinit"><code><c- g>VRDisplayEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#vrdisplay" id="ref-for-vrdisplay⑤⑥①"><c- n>VRDisplay</c-></a> <a data-type="VRDisplay " href="#dom-vrdisplayeventinit-display"><code><c- g>display</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="#enumdef-vrdisplayeventreason" id="ref-for-enumdef-vrdisplayeventreason①①"><c- n>VRDisplayEventReason</c-></a> <a data-type="VRDisplayEventReason " href="#dom-vrdisplayeventinit-reason"><code><c- g>reason</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①"><c- g>Window</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑨"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplayconnect"><code><c- g>onvrdisplayconnect</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplaydisconnect"><code><c- g>onvrdisplaydisconnect</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplayactivate"><code><c- g>onvrdisplayactivate</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplaydeactivate"><code><c- g>onvrdisplaydeactivate</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplayblur"><code><c- g>onvrdisplayblur</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplayfocus"><code><c- g>onvrdisplayfocus</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑥①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplaypresentchange"><code><c- g>onvrdisplaypresentchange</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑦①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplaypointerrestricted"><code><c- g>onvrdisplaypointerrestricted</c-></code></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑧①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-window-onvrdisplaypointerunrestricted"><code><c- g>onvrdisplaypointerunrestricted</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/gamepad/#gamepad" id="ref-for-gamepad⑤"><c- g>Gamepad</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long④①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#gamepad-getvrdisplays-attribute" id="ref-for-gamepad-getvrdisplays-attribute①"><c- g>displayId</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="vrdisplay">
   <b><a href="#vrdisplay">#vrdisplay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrdisplay">2.1. VRDisplay</a>
    <li><a href="#ref-for-vrdisplay①">2.1.1. Attributes</a> <a href="#ref-for-vrdisplay②">(2)</a> <a href="#ref-for-vrdisplay③">(3)</a> <a href="#ref-for-vrdisplay④">(4)</a> <a href="#ref-for-vrdisplay⑤">(5)</a> <a href="#ref-for-vrdisplay⑥">(6)</a> <a href="#ref-for-vrdisplay⑦">(7)</a> <a href="#ref-for-vrdisplay⑧">(8)</a> <a href="#ref-for-vrdisplay⑨">(9)</a> <a href="#ref-for-vrdisplay①⓪">(10)</a> <a href="#ref-for-vrdisplay①①">(11)</a> <a href="#ref-for-vrdisplay①②">(12)</a> <a href="#ref-for-vrdisplay①③">(13)</a> <a href="#ref-for-vrdisplay①④">(14)</a> <a href="#ref-for-vrdisplay①⑤">(15)</a> <a href="#ref-for-vrdisplay①⑥">(16)</a> <a href="#ref-for-vrdisplay①⑦">(17)</a> <a href="#ref-for-vrdisplay①⑧">(18)</a> <a href="#ref-for-vrdisplay①⑨">(19)</a> <a href="#ref-for-vrdisplay②⓪">(20)</a> <a href="#ref-for-vrdisplay②①">(21)</a> <a href="#ref-for-vrdisplay②②">(22)</a> <a href="#ref-for-vrdisplay②③">(23)</a> <a href="#ref-for-vrdisplay②④">(24)</a> <a href="#ref-for-vrdisplay②⑤">(25)</a> <a href="#ref-for-vrdisplay②⑥">(26)</a> <a href="#ref-for-vrdisplay②⑦">(27)</a> <a href="#ref-for-vrdisplay②⑧">(28)</a> <a href="#ref-for-vrdisplay②⑨">(29)</a> <a href="#ref-for-vrdisplay③⓪">(30)</a> <a href="#ref-for-vrdisplay③①">(31)</a> <a href="#ref-for-vrdisplay③②">(32)</a>
    <li><a href="#ref-for-vrdisplay③③">2.2. VRLayerInit</a>
    <li><a href="#ref-for-vrdisplay③④">2.2.1. Attributes</a> <a href="#ref-for-vrdisplay③⑤">(2)</a>
    <li><a href="#ref-for-vrdisplay③⑥">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-vrdisplay③⑦">2.3.1. Attributes</a> <a href="#ref-for-vrdisplay③⑧">(2)</a> <a href="#ref-for-vrdisplay③⑨">(3)</a> <a href="#ref-for-vrdisplay④⓪">(4)</a> <a href="#ref-for-vrdisplay④①">(5)</a> <a href="#ref-for-vrdisplay④②">(6)</a> <a href="#ref-for-vrdisplay④③">(7)</a>
    <li><a href="#ref-for-vrdisplay④④">2.6.1. Attributes</a>
    <li><a href="#ref-for-vrdisplay④⑤">2.7.1. Attributes</a> <a href="#ref-for-vrdisplay④⑥">(2)</a>
    <li><a href="#ref-for-vrdisplay④⑦">2.8.1. Attributes</a>
    <li><a href="#ref-for-vrdisplay④⑧">2.10. Navigator Interface extension</a> <a href="#ref-for-vrdisplay④⑨">(2)</a>
    <li><a href="#ref-for-vrdisplay⑤⓪">2.10.1. Attributes</a> <a href="#ref-for-vrdisplay⑤①">(2)</a> <a href="#ref-for-vrdisplay⑤②">(3)</a>
    <li><a href="#ref-for-vrdisplay⑤③">2.11.1. Reasons</a> <a href="#ref-for-vrdisplay⑤④">(2)</a>
    <li><a href="#ref-for-vrdisplay⑤⑤">2.12. VRDisplayEvent</a> <a href="#ref-for-vrdisplay⑤⑥">(2)</a>
    <li><a href="#ref-for-vrdisplay⑤⑦">2.12.1. Attributes</a>
    <li><a href="#ref-for-vrdisplay⑤⑧">2.13. Window Interface extension</a> <a href="#ref-for-vrdisplay⑤⑨">(2)</a> <a href="#ref-for-vrdisplay⑥⓪">(3)</a> <a href="#ref-for-vrdisplay⑥①">(4)</a> <a href="#ref-for-vrdisplay⑥②">(5)</a> <a href="#ref-for-vrdisplay⑥③">(6)</a> <a href="#ref-for-vrdisplay⑥④">(7)</a> <a href="#ref-for-vrdisplay⑥⑤">(8)</a> <a href="#ref-for-vrdisplay⑥⑥">(9)</a> <a href="#ref-for-vrdisplay⑥⑦">(10)</a>
    <li><a href="#ref-for-vrdisplay⑥⑧">2.14.1. Attributes</a> <a href="#ref-for-vrdisplay⑥⑨">(2)</a> <a href="#ref-for-vrdisplay⑦⓪">(3)</a> <a href="#ref-for-vrdisplay⑦①">(4)</a>
    <li><a href="#ref-for-vrdisplay⑦②">3. Security Considerations</a> <a href="#ref-for-vrdisplay⑦③">(2)</a> <a href="#ref-for-vrdisplay⑦④">(3)</a> <a href="#ref-for-vrdisplay⑦⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-geteyeparameters">
   <b><a href="#dom-vrdisplay-geteyeparameters">#dom-vrdisplay-geteyeparameters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-geteyeparameters">2.3.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-displayid">
   <b><a href="#dom-vrdisplay-displayid">#dom-vrdisplay-displayid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-displayid">2.14.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-getframedata">
   <b><a href="#dom-vrdisplay-getframedata">#dom-vrdisplay-getframedata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-getframedata">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-getframedata①">(2)</a> <a href="#ref-for-dom-vrdisplay-getframedata②">(3)</a> <a href="#ref-for-dom-vrdisplay-getframedata③">(4)</a>
    <li><a href="#ref-for-dom-vrdisplay-getframedata④">2.7.1. Attributes</a>
    <li><a href="#ref-for-dom-vrdisplay-getframedata⑤">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-requestanimationframe">
   <b><a href="#dom-vrdisplay-requestanimationframe">#dom-vrdisplay-requestanimationframe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-requestanimationframe">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-requestanimationframe①">(2)</a> <a href="#ref-for-dom-vrdisplay-requestanimationframe②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-requestpresent">
   <b><a href="#dom-vrdisplay-requestpresent">#dom-vrdisplay-requestpresent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-requestpresent">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-requestpresent①">(2)</a> <a href="#ref-for-dom-vrdisplay-requestpresent②">(3)</a> <a href="#ref-for-dom-vrdisplay-requestpresent③">(4)</a> <a href="#ref-for-dom-vrdisplay-requestpresent④">(5)</a> <a href="#ref-for-dom-vrdisplay-requestpresent⑤">(6)</a> <a href="#ref-for-dom-vrdisplay-requestpresent⑥">(7)</a> <a href="#ref-for-dom-vrdisplay-requestpresent⑦">(8)</a>
    <li><a href="#ref-for-dom-vrdisplay-requestpresent⑧">2.3.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-requestpresent⑨">(2)</a> <a href="#ref-for-dom-vrdisplay-requestpresent①⓪">(3)</a>
    <li><a href="#ref-for-dom-vrdisplay-requestpresent①①">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-isconnected">
   <b><a href="#dom-vrdisplay-isconnected">#dom-vrdisplay-isconnected</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-isconnected">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-isconnected①">2.1.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-ispresenting">
   <b><a href="#dom-vrdisplay-ispresenting">#dom-vrdisplay-ispresenting</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-ispresenting">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-ispresenting①">2.1.1. Attributes</a>
    <li><a href="#ref-for-dom-vrdisplay-ispresenting②">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-capabilities">
   <b><a href="#dom-vrdisplay-capabilities">#dom-vrdisplay-capabilities</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-capabilities">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-capabilities①">2.1.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-getpose">
   <b><a href="#dom-vrdisplay-getpose">#dom-vrdisplay-getpose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-getpose">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-getpose①">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-getpose②">(2)</a>
    <li><a href="#ref-for-dom-vrdisplay-getpose③">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-resetpose">
   <b><a href="#dom-vrdisplay-resetpose">#dom-vrdisplay-resetpose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-resetpose">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-resetpose①">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-resetpose②">(2)</a> <a href="#ref-for-dom-vrdisplay-resetpose③">(3)</a> <a href="#ref-for-dom-vrdisplay-resetpose④">(4)</a>
    <li><a href="#ref-for-dom-vrdisplay-resetpose⑤">2.6.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-resetpose⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-exitpresent">
   <b><a href="#dom-vrdisplay-exitpresent">#dom-vrdisplay-exitpresent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-exitpresent">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-getlayers">
   <b><a href="#dom-vrdisplay-getlayers">#dom-vrdisplay-getlayers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-getlayers">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplay-submitframe">
   <b><a href="#dom-vrdisplay-submitframe">#dom-vrdisplay-submitframe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplay-submitframe">2.1. VRDisplay</a>
    <li><a href="#ref-for-dom-vrdisplay-submitframe①">2.1.1. Attributes</a> <a href="#ref-for-dom-vrdisplay-submitframe②">(2)</a>
    <li><a href="#ref-for-dom-vrdisplay-submitframe③">2.2.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedefdef-vrsource">
   <b><a href="#typedefdef-vrsource">#typedefdef-vrsource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedefdef-vrsource">2.1.1. Attributes</a> <a href="#ref-for-typedefdef-vrsource①">(2)</a> <a href="#ref-for-typedefdef-vrsource②">(3)</a>
    <li><a href="#ref-for-typedefdef-vrsource③">2.2. VRLayerInit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-vrlayerinit">
   <b><a href="#dictdef-vrlayerinit">#dictdef-vrlayerinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-vrlayerinit">2.1. VRDisplay</a> <a href="#ref-for-dictdef-vrlayerinit①">(2)</a>
    <li><a href="#ref-for-dictdef-vrlayerinit②">2.1.1. Attributes</a> <a href="#ref-for-dictdef-vrlayerinit③">(2)</a> <a href="#ref-for-dictdef-vrlayerinit④">(3)</a> <a href="#ref-for-dictdef-vrlayerinit⑤">(4)</a> <a href="#ref-for-dictdef-vrlayerinit⑥">(5)</a> <a href="#ref-for-dictdef-vrlayerinit⑦">(6)</a> <a href="#ref-for-dictdef-vrlayerinit⑧">(7)</a> <a href="#ref-for-dictdef-vrlayerinit⑨">(8)</a> <a href="#ref-for-dictdef-vrlayerinit①⓪">(9)</a>
    <li><a href="#ref-for-dictdef-vrlayerinit①①">2.2. VRLayerInit</a>
    <li><a href="#ref-for-dictdef-vrlayerinit①②">3. Security Considerations</a> <a href="#ref-for-dictdef-vrlayerinit①③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrlayerinit-source">
   <b><a href="#dom-vrlayerinit-source">#dom-vrlayerinit-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrlayerinit-source">2.2. VRLayerInit</a>
    <li><a href="#ref-for-dom-vrlayerinit-source①">2.2.1. Attributes</a> <a href="#ref-for-dom-vrlayerinit-source②">(2)</a> <a href="#ref-for-dom-vrlayerinit-source③">(3)</a>
    <li><a href="#ref-for-dom-vrlayerinit-source④">3. Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrlayerinit-leftbounds">
   <b><a href="#dom-vrlayerinit-leftbounds">#dom-vrlayerinit-leftbounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrlayerinit-leftbounds">2.2. VRLayerInit</a>
    <li><a href="#ref-for-dom-vrlayerinit-leftbounds①">2.2.1. Attributes</a> <a href="#ref-for-dom-vrlayerinit-leftbounds②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrlayerinit-rightbounds">
   <b><a href="#dom-vrlayerinit-rightbounds">#dom-vrlayerinit-rightbounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrlayerinit-rightbounds">2.2. VRLayerInit</a>
    <li><a href="#ref-for-dom-vrlayerinit-rightbounds①">2.2.1. Attributes</a> <a href="#ref-for-dom-vrlayerinit-rightbounds②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrdisplaycapabilities">
   <b><a href="#vrdisplaycapabilities">#vrdisplaycapabilities</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrdisplaycapabilities">2.1. VRDisplay</a>
    <li><a href="#ref-for-vrdisplaycapabilities①">2.1.1. Attributes</a>
    <li><a href="#ref-for-vrdisplaycapabilities②">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-vrdisplaycapabilities③">2.6.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplaycapabilities-hasposition">
   <b><a href="#dom-vrdisplaycapabilities-hasposition">#dom-vrdisplaycapabilities-hasposition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasposition">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasposition①">2.3.1. Attributes</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasposition②">2.6.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplaycapabilities-hasorientation">
   <b><a href="#dom-vrdisplaycapabilities-hasorientation">#dom-vrdisplaycapabilities-hasorientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasorientation">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasorientation①">2.3.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplaycapabilities-hasexternaldisplay">
   <b><a href="#dom-vrdisplaycapabilities-hasexternaldisplay">#dom-vrdisplaycapabilities-hasexternaldisplay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasexternaldisplay">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-hasexternaldisplay①">2.3.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplaycapabilities-canpresent">
   <b><a href="#dom-vrdisplaycapabilities-canpresent">#dom-vrdisplaycapabilities-canpresent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-canpresent">2.1.1. Attributes</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-canpresent①">2.3. VRDisplayCapabilities</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-canpresent②">2.3.1. Attributes</a> <a href="#ref-for-dom-vrdisplaycapabilities-canpresent③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplaycapabilities-maxlayers">
   <b><a href="#dom-vrdisplaycapabilities-maxlayers">#dom-vrdisplaycapabilities-maxlayers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-maxlayers">2.1.1. Attributes</a>
    <li><a href="#ref-for-dom-vrdisplaycapabilities-maxlayers①">2.3. VRDisplayCapabilities</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-vreye">
   <b><a href="#enumdef-vreye">#enumdef-vreye</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-vreye">2.1. VRDisplay</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrfieldofview">
   <b><a href="#vrfieldofview">#vrfieldofview</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrfieldofview">2.5. VRFieldOfView</a>
    <li><a href="#ref-for-vrfieldofview①">2.8. VREyeParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrpose">
   <b><a href="#vrpose">#vrpose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrpose">2.1. VRDisplay</a>
    <li><a href="#ref-for-vrpose①">2.1.1. Attributes</a> <a href="#ref-for-vrpose②">(2)</a> <a href="#ref-for-vrpose③">(3)</a> <a href="#ref-for-vrpose④">(4)</a> <a href="#ref-for-vrpose⑤">(5)</a>
    <li><a href="#ref-for-vrpose⑥">2.6.1. Attributes</a>
    <li><a href="#ref-for-vrpose⑦">2.7. VRFrameData</a>
    <li><a href="#ref-for-vrpose⑧">2.7.1. Attributes</a>
    <li><a href="#ref-for-vrpose⑨">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-position">
   <b><a href="#dom-vrpose-position">#dom-vrpose-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-position">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-linearvelocity">
   <b><a href="#dom-vrpose-linearvelocity">#dom-vrpose-linearvelocity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-linearvelocity">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-linearacceleration">
   <b><a href="#dom-vrpose-linearacceleration">#dom-vrpose-linearacceleration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-linearacceleration">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-orientation">
   <b><a href="#dom-vrpose-orientation">#dom-vrpose-orientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-orientation">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-angularvelocity">
   <b><a href="#dom-vrpose-angularvelocity">#dom-vrpose-angularvelocity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-angularvelocity">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrpose-angularacceleration">
   <b><a href="#dom-vrpose-angularacceleration">#dom-vrpose-angularacceleration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrpose-angularacceleration">2.6. VRPose</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrframedata">
   <b><a href="#vrframedata">#vrframedata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrframedata">2.1. VRDisplay</a>
    <li><a href="#ref-for-vrframedata①">2.1.1. Attributes</a> <a href="#ref-for-vrframedata②">(2)</a> <a href="#ref-for-vrframedata③">(3)</a>
    <li><a href="#ref-for-vrframedata④">2.8.1. Attributes</a> <a href="#ref-for-vrframedata⑤">(2)</a>
    <li><a href="#ref-for-vrframedata⑥">2.9.1. Attributes</a>
    <li><a href="#ref-for-vrframedata⑦">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-timestamp">
   <b><a href="#dom-vrframedata-timestamp">#dom-vrframedata-timestamp</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-timestamp">2.7. VRFrameData</a>
    <li><a href="#ref-for-dom-vrframedata-timestamp①">2.7.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-leftprojectionmatrix">
   <b><a href="#dom-vrframedata-leftprojectionmatrix">#dom-vrframedata-leftprojectionmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-leftprojectionmatrix">2.7. VRFrameData</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-leftviewmatrix">
   <b><a href="#dom-vrframedata-leftviewmatrix">#dom-vrframedata-leftviewmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-leftviewmatrix">2.7. VRFrameData</a>
    <li><a href="#ref-for-dom-vrframedata-leftviewmatrix①">2.9.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-rightprojectionmatrix">
   <b><a href="#dom-vrframedata-rightprojectionmatrix">#dom-vrframedata-rightprojectionmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-rightprojectionmatrix">2.7. VRFrameData</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-rightviewmatrix">
   <b><a href="#dom-vrframedata-rightviewmatrix">#dom-vrframedata-rightviewmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-rightviewmatrix">2.7. VRFrameData</a>
    <li><a href="#ref-for-dom-vrframedata-rightviewmatrix①">2.9.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrframedata-pose">
   <b><a href="#dom-vrframedata-pose">#dom-vrframedata-pose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrframedata-pose">2.7. VRFrameData</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vreyeparameters">
   <b><a href="#vreyeparameters">#vreyeparameters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vreyeparameters">2.1. VRDisplay</a>
    <li><a href="#ref-for-vreyeparameters①">2.1.1. Attributes</a>
    <li><a href="#ref-for-vreyeparameters②">2.8. VREyeParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vreyeparameters-offset">
   <b><a href="#dom-vreyeparameters-offset">#dom-vreyeparameters-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vreyeparameters-offset">2.8. VREyeParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vreyeparameters-fieldofview">
   <b><a href="#dom-vreyeparameters-fieldofview">#dom-vreyeparameters-fieldofview</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vreyeparameters-fieldofview">2.8. VREyeParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vreyeparameters-renderwidth">
   <b><a href="#dom-vreyeparameters-renderwidth">#dom-vreyeparameters-renderwidth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vreyeparameters-renderwidth">2.8. VREyeParameters</a>
    <li><a href="#ref-for-dom-vreyeparameters-renderwidth①">2.8.1. Attributes</a> <a href="#ref-for-dom-vreyeparameters-renderwidth②">(2)</a> <a href="#ref-for-dom-vreyeparameters-renderwidth③">(3)</a> <a href="#ref-for-dom-vreyeparameters-renderwidth④">(4)</a> <a href="#ref-for-dom-vreyeparameters-renderwidth⑤">(5)</a> <a href="#ref-for-dom-vreyeparameters-renderwidth⑥">(6)</a> <a href="#ref-for-dom-vreyeparameters-renderwidth⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vreyeparameters-renderheight">
   <b><a href="#dom-vreyeparameters-renderheight">#dom-vreyeparameters-renderheight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vreyeparameters-renderheight">2.8. VREyeParameters</a>
    <li><a href="#ref-for-dom-vreyeparameters-renderheight①">2.8.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrstageparameters">
   <b><a href="#vrstageparameters">#vrstageparameters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrstageparameters">2.1. VRDisplay</a>
    <li><a href="#ref-for-vrstageparameters①">2.1.1. Attributes</a>
    <li><a href="#ref-for-vrstageparameters②">2.9. VRStageParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrstageparameters-sittingtostandingtransform">
   <b><a href="#dom-vrstageparameters-sittingtostandingtransform">#dom-vrstageparameters-sittingtostandingtransform</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrstageparameters-sittingtostandingtransform">2.1.1. Attributes</a>
    <li><a href="#ref-for-dom-vrstageparameters-sittingtostandingtransform①">2.9. VRStageParameters</a>
    <li><a href="#ref-for-dom-vrstageparameters-sittingtostandingtransform②">2.9.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrstageparameters-sizex">
   <b><a href="#dom-vrstageparameters-sizex">#dom-vrstageparameters-sizex</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrstageparameters-sizex">2.9. VRStageParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrstageparameters-sizez">
   <b><a href="#dom-vrstageparameters-sizez">#dom-vrstageparameters-sizez</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrstageparameters-sizez">2.9. VRStageParameters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="navigator-getvrdisplays-attribute">
   <b><a href="#navigator-getvrdisplays-attribute">#navigator-getvrdisplays-attribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigator-getvrdisplays-attribute">2.10. Navigator Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="navigator-activevrdisplays-attribute">
   <b><a href="#navigator-activevrdisplays-attribute">#navigator-activevrdisplays-attribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigator-activevrdisplays-attribute">2.10. Navigator Interface extension</a>
    <li><a href="#ref-for-navigator-activevrdisplays-attribute①">2.10.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-vrdisplayeventreason">
   <b><a href="#enumdef-vrdisplayeventreason">#enumdef-vrdisplayeventreason</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-vrdisplayeventreason">2.12. VRDisplayEvent</a> <a href="#ref-for-enumdef-vrdisplayeventreason①">(2)</a>
    <li><a href="#ref-for-enumdef-vrdisplayeventreason②">2.12.1. Attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayeventreason-mounted">
   <b><a href="#dom-vrdisplayeventreason-mounted">#dom-vrdisplayeventreason-mounted</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayeventreason-mounted">2.11. VRDisplayEventReason</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayeventreason-navigation">
   <b><a href="#dom-vrdisplayeventreason-navigation">#dom-vrdisplayeventreason-navigation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayeventreason-navigation">2.11. VRDisplayEventReason</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayeventreason-requested">
   <b><a href="#dom-vrdisplayeventreason-requested">#dom-vrdisplayeventreason-requested</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayeventreason-requested">2.11. VRDisplayEventReason</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayeventreason-unmounted">
   <b><a href="#dom-vrdisplayeventreason-unmounted">#dom-vrdisplayeventreason-unmounted</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayeventreason-unmounted">2.11. VRDisplayEventReason</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vrdisplayevent">
   <b><a href="#vrdisplayevent">#vrdisplayevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vrdisplayevent">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-vrdisplayeventinit">
   <b><a href="#dictdef-vrdisplayeventinit">#dictdef-vrdisplayeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-vrdisplayeventinit">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayevent-display">
   <b><a href="#dom-vrdisplayevent-display">#dom-vrdisplayevent-display</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayevent-display">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-vrdisplayevent-reason">
   <b><a href="#dom-vrdisplayevent-reason">#dom-vrdisplayevent-reason</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-vrdisplayevent-reason">2.12. VRDisplayEvent</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="window-onvrdisplaypointerrestricted-event">
   <b><a href="#window-onvrdisplaypointerrestricted-event">#window-onvrdisplaypointerrestricted-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window-onvrdisplaypointerrestricted-event">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="window-onvrdisplaypointerunrestricted-event">
   <b><a href="#window-onvrdisplaypointerunrestricted-event">#window-onvrdisplaypointerunrestricted-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window-onvrdisplaypointerunrestricted-event">2.13. Window Interface extension</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="gamepad-getvrdisplays-attribute">
   <b><a href="#gamepad-getvrdisplays-attribute">#gamepad-getvrdisplays-attribute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-gamepad-getvrdisplays-attribute">2.14. Gamepad Interface extension</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>